layout: remove unnecessary inset for header on landscape screen in iOS (#1425)

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

@@ -104,6 +104,7 @@ const BooksGrid: React.FC<BooksGridProps> = ({ bookKeys, onCloseBook }) => {
               isHoveredAnim={bookKeys.length > 2}
               onCloseBook={onCloseBook}
               onSetSettingsDialogOpen={setFontLayoutSettingsDialogOpen}
+              gridInsets={gridInsets}
             />
             <FoliateViewer
               bookKey={bookKey}

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

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React, { useEffect, useRef, useState } from 'react';
 import { PiDotsThreeVerticalBold } from 'react-icons/pi';
 
+import { Insets } from '@/types/misc';
 import { useEnv } from '@/context/EnvContext';
 import { useThemeStore } from '@/store/themeStore';
 import { useReaderStore } from '@/store/readerStore';
@@ -22,6 +23,7 @@ interface HeaderBarProps {
   bookTitle: string;
   isTopLeft: boolean;
   isHoveredAnim: boolean;
+  gridInsets: Insets;
   onCloseBook: (bookKey: string) => void;
   onSetSettingsDialogOpen: (open: boolean) => void;
 }
@@ -31,6 +33,7 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
   bookTitle,
   isTopLeft,
   isHoveredAnim,
+  gridInsets,
   onCloseBook,
   onSetSettingsDialogOpen,
 }) => {
@@ -77,10 +80,10 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
 
   return (
     <div
-      className={clsx(
-        'bg-base-100 absolute top-0 w-full',
-        appService?.hasSafeAreaInset && 'pt-[env(safe-area-inset-top)]',
-      )}
+      className={clsx('bg-base-100 absolute top-0 w-full')}
+      style={{
+        paddingTop: appService?.hasSafeAreaInset ? `${gridInsets.top}px` : '0px',
+      }}
     >
       <div
         className={clsx('absolute top-0 z-10 hidden h-11 w-full sm:flex')}
@@ -89,11 +92,11 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
       />
       <div
         className={clsx(
-          'bg-base-100 absolute left-0 right-0 top-0 z-10 h-[env(safe-area-inset-top)]',
+          'bg-base-100 absolute left-0 right-0 top-0 z-10',
           isVisible ? 'visible' : 'hidden',
         )}
         style={{
-          height: systemUIVisible ? `max(env(safe-area-inset-top), ${statusBarHeight}px)` : '',
+          height: systemUIVisible ? `${Math.max(gridInsets.top, statusBarHeight)}px` : '0px',
         }}
       />
       <div
@@ -110,8 +113,8 @@ const HeaderBar: React.FC<HeaderBarProps> = ({
         )}
         style={{
           marginTop: systemUIVisible
-            ? `max(env(safe-area-inset-top), ${statusBarHeight}px)`
-            : 'env(safe-area-inset-top)',
+            ? `${Math.max(gridInsets.top, statusBarHeight)}px`
+            : `${gridInsets.top}px`,
         }}
         onMouseLeave={() => !appService?.isMobile && setHoveredBookKey('')}
       >

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

@@ -33,7 +33,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
   const { settings, setSettings } = useSettingsStore();
   const { isSideBarVisible, setSideBarVisible } = useSidebarStore();
   const { isNotebookVisible, setNotebookVisible } = useNotebookStore();
-  const { isDarkMode, showSystemUI, dismissSystemUI } = useThemeStore();
+  const { isDarkMode, systemUIAlwaysHidden, showSystemUI, dismissSystemUI } = useThemeStore();
   const { acquireBackKeyInterception, releaseBackKeyInterception } = useDeviceControlStore();
   const [libraryLoaded, setLibraryLoaded] = useState(false);
   const isInitiating = useRef(false);
@@ -96,8 +96,9 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
   useEffect(() => {
     if (!appService?.isMobileApp) return;
     const systemUIVisible = !!hoveredBookKey || settings.alwaysShowStatusBar;
-    setSystemUIVisibility({ visible: systemUIVisible, darkMode: isDarkMode });
-    if (systemUIVisible) {
+    const visible = systemUIVisible && !systemUIAlwaysHidden;
+    setSystemUIVisibility({ visible, darkMode: isDarkMode });
+    if (visible) {
       showSystemUI();
     } else {
       dismissSystemUI();