layout: fix drop down in TTS panel cannot open on older iOS, closes #1810 (#1841)

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',
           }}

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