fix(reader): let page margins shrink into the safe-area inset (#4761) (#5001)

apps/readest-app/src/app/reader/components/FoliateViewer.tsx

@@ -781,6 +781,7 @@ const FoliateViewer: React.FC<{
   const applyMarginAndGap = () => {
     const viewSettings = getViewSettings(bookKey)!;
     const viewState = getViewState(bookKey);
+    const bookData = getBookData(bookKey);
     const viewInsets = getViewInsets(viewSettings);
     const showDoubleBorder = viewSettings.vertical && viewSettings.doubleBorder;
     const showDoubleBorderHeader = showDoubleBorder && viewSettings.showHeader;
@@ -814,7 +815,7 @@ const FoliateViewer: React.FC<{
       const scrollBottom = footerVisible
         ? Math.max(footerBarHeight, miniPlayerClearance)
         : miniPlayerClearance;
-      setScrollMargins({ top: scrollTop, bottom: scrollBottom });
+      setScrollMargins({ top: bookData?.isFixedLayout ? 0 : scrollTop, bottom: scrollBottom });
     } else {
       setScrollMargins({ top: 0, bottom: 0 });
     }

apps/readest-app/src/app/reader/components/HintInfo.tsx

@@ -60,8 +60,6 @@ const HintInfo: React.FC<SectionInfoProps> = ({
     };
   }, [hintMessage]);
 
-  if (!hintMessage) return null;
-
   return (
     <>
       <div
@@ -100,8 +98,8 @@ const HintInfo: React.FC<SectionInfoProps> = ({
       >
         <h2
           className={clsx(
-            'text-center font-sans',
-            isEink ? 'text-sm font-normal' : 'text-neutral-content text-xs font-light',
+            'text-center font-sans line-clamp-1',
+            isEink ? 'text-sm font-normal' : 'text-base-content text-xs font-light',
           )}
         >
           {hintMessage || ''}

apps/readest-app/src/app/reader/components/ProgressBar.tsx

@@ -287,9 +287,9 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
                 'remaining-info whitespace-nowrap text-start',
                 !stickyBarActive && 'flex-1',
                 showStatusInfo && 'overflow-hidden',
-                // Keep the text legible on any backdrop (e.g. a light PDF page
-                // under a dark theme, #4901); blend it against what's behind.
-                !isEink && 'text-white/75 mix-blend-difference',
+                bookData?.isFixedLayout && !isEink
+                  ? 'text-white/75 mix-blend-difference'
+                  : 'text-base-content',
               )}
             >
               {viewSettings.showRemainingTime ? (
@@ -349,9 +349,9 @@ const ProgressBar: React.FC<ProgressBarProps> = ({
           className={clsx(
             'progress-info items-center overflow-hidden whitespace-nowrap text-end tabular-nums',
             !stickyBarActive && 'flex-1',
-            // Keep the page number legible on any backdrop (e.g. a light PDF
-            // page under a dark theme, #4901); blend it against what's behind.
-            !isEink && 'text-white/75 mix-blend-difference',
+            bookData?.isFixedLayout && !isEink
+              ? 'text-white/75 mix-blend-difference'
+              : 'text-base-content',
           )}
         >
           {(progressBarMode === 'all' || progressBarMode.includes('progress')) && (

apps/readest-app/src/app/reader/components/SectionInfo.tsx

@@ -6,6 +6,7 @@ import { useThemeStore } from '@/store/themeStore';
 import { useReaderStore } from '@/store/readerStore';
 import { useTranslation } from '@/hooks/useTranslation';
 import { eventDispatcher } from '@/utils/event';
+import { useBookDataStore } from '@/store/bookDataStore';
 
 interface SectionInfoProps {
   bookKey: string;
@@ -34,7 +35,9 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
   const { appService } = useEnv();
   const { hoveredBookKey, getView, getViewSettings, setHoveredBookKey } = useReaderStore();
   const { systemUIVisible, statusBarHeight } = useThemeStore();
+  const getBookData = useBookDataStore((s) => s.getBookData);
   const viewSettings = getViewSettings(bookKey)!;
+  const bookData = getBookData(bookKey);
   const topInset = Math.max(
     gridInsets.top,
     appService?.isAndroidApp && systemUIVisible ? statusBarHeight / 2 : 0,
@@ -75,13 +78,11 @@ const SectionInfo: React.FC<SectionInfoProps> = ({
       <div
         className={clsx(
           'sectioninfo absolute flex items-center overflow-hidden font-sans',
-          // A light-mode PDF stays white under a dark theme, so the themed
-          // neutral-content title was unreadable on the page (#4901). Blend the
-          // text against whatever is actually behind it (page or margin) so it
-          // stays legible on any background. text-white/75 matches the previous
-          // neutral-content brightness over the dark theme, so nothing changes
-          // for reflowable books. E-ink keeps its plain base-content text.
-          isEink ? 'text-sm font-normal' : 'text-white/75 mix-blend-difference text-xs font-light',
+          isEink
+            ? 'text-sm font-normal'
+            : bookData?.isFixedLayout
+              ? 'text-white/75 mix-blend-difference text-xs font-light'
+              : 'text-base-content text-xs font-light',
           isVertical ? 'writing-vertical-rl max-h-[85%]' : 'top-0',
         )}
         role='none'

apps/readest-app/src/app/reader/components/StatusInfo.tsx

@@ -28,7 +28,7 @@ const StatusInfo: React.FC<StatusInfoProps> = ({
   return (
     <div
       className={clsx(
-        'status-bar flex shrink-0 items-center gap-2 whitespace-nowrap tabular-nums',
+        'status-bar flex shrink-0 items-center gap-2 whitespace-nowrap tabular-nums text-base-content',
         isVertical ? 'my-auto' : 'flex-row',
       )}
     >