fix(layout): fixed layout of book reading progress and reader footer bar (#3117)

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 (

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

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