fix(tts): fixed headings cannot be highlighted in TTS (#1955)

apps/readest-app/src/app/reader/components/tts/TTSControl.tsx

@@ -20,7 +20,7 @@ import TTSIcon from './TTSIcon';
 import TTSBar from './TTSBar';
 
 const POPUP_WIDTH = 282;
-const POPUP_HEIGHT = 180;
+const POPUP_HEIGHT = 160;
 const POPUP_PADDING = 10;
 
 interface TTSControlProps {

apps/readest-app/src/app/reader/components/tts/TTSPanel.tsx

@@ -203,7 +203,7 @@ const TTSPanel = ({
   const timeoutOptions = getTTSTimeoutOptions(_);
 
   return (
-    <div className='flex w-full flex-col items-center justify-center gap-2 rounded-2xl px-4 pt-4'>
+    <div className='flex w-full flex-col items-center justify-center gap-2 rounded-2xl px-4 pt-4 sm:gap-1'>
       <div className='flex w-full flex-col items-center gap-0.5'>
         <input
           className='range'
@@ -362,7 +362,7 @@ const TTSPanel = ({
           </ul>
         </div>
       </div>
-      <div className='flex h-6 items-center justify-center opacity-60 transition-transform duration-200 hover:scale-105 hover:opacity-100'>
+      <div className='flex h-4 items-center justify-center opacity-60 transition-transform duration-200 hover:scale-105 hover:opacity-100'>
         <button onClick={onToogleTTSBar} className='p-0'>
           {viewSettings?.showTTSBar ? (
             <TbChevronCompactUp size={iconSize48} style={{ transform: 'scaleY(0.85)' }} />