From 7067129887cc670431d41bcfff9c377e621e31cd Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Wed, 3 Sep 2025 22:42:59 +0800
Subject: [PATCH] fix(tts): fixed headings cannot be highlighted in TTS (#1955)

---
 apps/readest-app/src/app/reader/components/tts/TTSControl.tsx | 2 +-
 apps/readest-app/src/app/reader/components/tts/TTSPanel.tsx   | 4 ++--
 packages/foliate-js                                           | 2 +-
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx b/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
index 8b57c9e1..5593ae31 100644
--- a/apps/readest-app/src/app/reader/components/tts/TTSControl.tsx
+++ b/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 {
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 acfb6ee6..c404fb36 100644
--- a/apps/readest-app/src/app/reader/components/tts/TTSPanel.tsx
+++ b/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)' }} />
diff --git a/packages/foliate-js b/packages/foliate-js
index ac613675..13d143a7 160000
--- a/packages/foliate-js
+++ b/packages/foliate-js
@@ -1 +1 @@
-Subproject commit ac613675dac567f0076a0ef2b671fa7f35743415
+Subproject commit 13d143a7650b3037e23a4c246cfaa3d204de8d87