From 04b0752b2295fc3abd3662d595d5f9aaad174351 Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Tue, 19 Aug 2025 21:02:02 +0800
Subject: [PATCH] layout: fix drop down in TTS panel cannot open on older iOS,
 closes #1810 (#1841)

---
 .../readest-app/src/app/reader/components/tts/TTSIcon.tsx | 8 ++++++--
 .../src/app/reader/components/tts/TTSPanel.tsx            | 7 ++++++-
 2 files changed, 12 insertions(+), 3 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/tts/TTSIcon.tsx b/apps/readest-app/src/app/reader/components/tts/TTSIcon.tsx
index a88e9561..9dd70034 100644
--- a/apps/readest-app/src/app/reader/components/tts/TTSIcon.tsx
+++ b/apps/readest-app/src/app/reader/components/tts/TTSIcon.tsx
@@ -13,14 +13,18 @@ const TTSIcon: React.FC<TTSIconProps> = ({ isPlaying, ttsInited, onClick }) => {
   return (
     <div
       className={clsx(
-        'relative h-full w-full',
+        'relative h-full w-full rounded-full',
         ttsInited ? 'cursor-pointer' : 'cursor-not-allowed',
       )}
+      style={{
+        maskImage: 'radial-gradient(circle, white 100%, transparent 100%)',
+        WebkitMaskImage: 'radial-gradient(circle, white 100%, transparent 100%)',
+      }}
       onClick={onClick}
     >
       <div className='absolute inset-0 overflow-hidden rounded-full bg-gradient-to-r from-blue-500 via-emerald-500 to-violet-500'>
         <div
-          className='absolute -inset-full bg-gradient-to-r from-blue-500 via-emerald-500 to-violet-500'
+          className='absolute -inset-full rounded-full bg-gradient-to-r from-blue-500 via-emerald-500 to-violet-500'
           style={{
             animation: isPlaying && ttsInited ? 'moveGradient 2s alternate infinite' : 'none',
           }}
diff --git a/apps/readest-app/src/app/reader/components/tts/TTSPanel.tsx b/apps/readest-app/src/app/reader/components/tts/TTSPanel.tsx
index e81e8292..87f47154 100644
--- a/apps/readest-app/src/app/reader/components/tts/TTSPanel.tsx
+++ b/apps/readest-app/src/app/reader/components/tts/TTSPanel.tsx
@@ -248,6 +248,7 @@ const TTSPanel = ({
           <button
             tabIndex={0}
             className='flex flex-col items-center justify-center rounded-full p-1'
+            onClick={(e) => e.currentTarget.focus()}
           >
             <MdAlarm size={iconSize32} />
             {timeoutCountdown && (
@@ -290,7 +291,11 @@ const TTSPanel = ({
         </div>
 
         <div className='dropdown dropdown-top'>
-          <button tabIndex={0} className='rounded-full p-1'>
+          <button
+            tabIndex={0}
+            className='rounded-full p-1'
+            onClick={(e) => e.currentTarget.focus()}
+          >
             <RiVoiceAiFill size={iconSize32} />
           </button>
           <ul