From fb387c23844f5eb394d17dbff042bfe4e84acaad Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Fri, 30 Jan 2026 06:54:20 +0100
Subject: [PATCH] fix(layout): fixed layout of book reading progress and reader
 footer bar (#3117)

---
 .../src/app/library/components/ReadingProgress.tsx           | 4 ++--
 .../src/app/reader/components/footerbar/DesktopFooterBar.tsx | 2 +-
 .../src/app/reader/components/footerbar/FooterBar.tsx        | 5 ++---
 3 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/apps/readest-app/src/app/library/components/ReadingProgress.tsx b/apps/readest-app/src/app/library/components/ReadingProgress.tsx
index 6d311bdb..285f4180 100644
--- a/apps/readest-app/src/app/library/components/ReadingProgress.tsx
+++ b/apps/readest-app/src/app/library/components/ReadingProgress.tsx
@@ -41,12 +41,12 @@ const ReadingProgress: React.FC<ReadingProgressProps> = memo(
           </div>
         );
       } else {
-        return null;
+        return <div className='flex justify-start'></div>;
       }
     }
 
     if (progressPercentage === null || Number.isNaN(progressPercentage)) {
-      return null;
+      return <div className='flex justify-start'></div>;
     }
 
     return (
diff --git a/apps/readest-app/src/app/reader/components/footerbar/DesktopFooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/DesktopFooterBar.tsx
index 65d49cad..b12f441b 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/DesktopFooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/DesktopFooterBar.tsx
@@ -67,7 +67,7 @@ const DesktopFooterBar: React.FC<FooterBarChildProps> = ({
 
   return (
     <div
-      className='absolute hidden h-8 w-full items-center gap-x-4 px-4 sm:flex'
+      className='hidden h-8 w-full items-center gap-x-4 px-4 sm:flex'
       style={{ bottom: isMobile ? `${gridInsets.bottom * 0.33}px` : '0px' }}
     >
       <Button
diff --git a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
index 5058b980..08712092 100644
--- a/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
+++ b/apps/readest-app/src/app/reader/components/footerbar/FooterBar.tsx
@@ -203,15 +203,14 @@ const FooterBar: React.FC<FooterBarProps> = ({
     (bookData?.isFixedLayout && viewSettings?.zoomLevel && viewSettings.zoomLevel > 100);
 
   const containerClasses = clsx(
-    'footer-bar shadow-xs bottom-0 z-10 flex w-full flex-col',
-    'sm:h-[52px] sm:justify-center',
+    'footer-bar shadow-xs bottom-0 z-10 flex w-full flex-col sm:h-[52px]',
     'sm:bg-base-100 border-base-300/50 border-t sm:border-none',
     'transition-[opacity,transform] duration-300',
     window.innerWidth < 640 ? 'fixed' : 'absolute',
     appService?.hasRoundedWindow && 'rounded-window-bottom-right',
     !isSideBarVisible && appService?.hasRoundedWindow && 'rounded-window-bottom-left',
     isHoveredAnim && 'hover-bar-anim',
-    needHorizontalScroll && 'sm:!bottom-3 sm:!h-10 sm:justify-end',
+    needHorizontalScroll ? 'sm:!bottom-3 sm:!h-10 sm:justify-end' : 'sm:justify-center',
     isVisible
       ? 'pointer-events-auto translate-y-0 opacity-100'
       : 'pointer-events-none translate-y-full opacity-0 sm:translate-y-0',