From e28dabce655102062cf0723ceaaa8b14ed4909ae Mon Sep 17 00:00:00 2001
From: Huang Xin <chrox.huang@gmail.com>
Date: Mon, 1 Dec 2025 20:48:14 +0800
Subject: [PATCH] fix(layout): refactor full height for edge to edge env and in
 browser env (#2582)

---
 apps/readest-app/src-tauri/src/lib.rs              |  1 +
 apps/readest-app/src/app/auth/page.tsx             |  2 +-
 apps/readest-app/src/app/library/page.tsx          |  6 +++---
 .../src/app/reader/components/Reader.tsx           |  6 +++---
 .../src/app/reader/components/ReaderContent.tsx    |  4 ++--
 .../app/reader/components/notebook/Notebook.tsx    |  3 +--
 .../src/app/reader/components/sidebar/SideBar.tsx  |  3 +--
 apps/readest-app/src/app/user/page.tsx             |  2 +-
 apps/readest-app/src/styles/globals.css            | 14 ++++++++++++++
 9 files changed, 27 insertions(+), 14 deletions(-)

diff --git a/apps/readest-app/src-tauri/src/lib.rs b/apps/readest-app/src-tauri/src/lib.rs
index 595f458a..e2a475be 100644
--- a/apps/readest-app/src-tauri/src/lib.rs
+++ b/apps/readest-app/src-tauri/src/lib.rs
@@ -271,6 +271,7 @@ pub fn run() {
                 .initialization_script(
                     r#"
                         window.addEventListener('DOMContentLoaded', function() {
+                            document.documentElement.classList.add('edge-to-edge');
                             const isTauriLocal = window.location.protocol === 'tauri:' ||
                                                 window.location.protocol === 'about:' ||
                                                 window.location.hostname === 'tauri.localhost';
diff --git a/apps/readest-app/src/app/auth/page.tsx b/apps/readest-app/src/app/auth/page.tsx
index 2329b8be..3df0449a 100644
--- a/apps/readest-app/src/app/auth/page.tsx
+++ b/apps/readest-app/src/app/auth/page.tsx
@@ -344,7 +344,7 @@ export default function AuthPage() {
   return isTauriAppPlatform() ? (
     <div
       className={clsx(
-        'bg-base-100 inset-0 flex h-[100vh] select-none flex-col items-center overflow-hidden',
+        'bg-base-100 full-height inset-0 flex select-none flex-col items-center overflow-hidden',
         appService?.hasRoundedWindow && isRoundedWindow && 'window-border rounded-window',
       )}
     >
diff --git a/apps/readest-app/src/app/library/page.tsx b/apps/readest-app/src/app/library/page.tsx
index f77952aa..e461d2dd 100644
--- a/apps/readest-app/src/app/library/page.tsx
+++ b/apps/readest-app/src/app/library/page.tsx
@@ -629,7 +629,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
   };
 
   if (!appService || !insets || checkOpenWithBooks || checkLastOpenBooks) {
-    return <div className={clsx('h-[100vh]', !appService?.isLinuxApp && 'bg-base-200')} />;
+    return <div className={clsx('full-height', !appService?.isLinuxApp && 'bg-base-200')} />;
   }
 
   const showBookshelf = libraryLoaded || libraryBooks.length > 0;
@@ -639,7 +639,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
       ref={pageRef}
       aria-label='Your Library'
       className={clsx(
-        'library-page text-base-content flex h-[100vh] select-none flex-col overflow-hidden',
+        'library-page text-base-content full-height flex select-none flex-col overflow-hidden',
         viewSettings?.isEink ? 'bg-base-100' : 'bg-base-200',
         appService?.hasRoundedWindow && isRoundedWindow && 'window-border rounded-window',
       )}
@@ -793,7 +793,7 @@ const LibraryPageContent = ({ searchParams }: { searchParams: ReadonlyURLSearchP
 
 const LibraryPage = () => {
   return (
-    <Suspense fallback={<div className='h-[100vh]' />}>
+    <Suspense fallback={<div className='full-height' />}>
       <LibraryPageWithSearchParams />
     </Suspense>
   );
diff --git a/apps/readest-app/src/app/reader/components/Reader.tsx b/apps/readest-app/src/app/reader/components/Reader.tsx
index 1f0ea494..137f5bba 100644
--- a/apps/readest-app/src/app/reader/components/Reader.tsx
+++ b/apps/readest-app/src/app/reader/components/Reader.tsx
@@ -129,11 +129,11 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
   return libraryLoaded && settings.globalReadSettings ? (
     <div
       className={clsx(
-        'reader-page bg-base-100 text-base-content h-[100vh] select-none overflow-hidden',
+        'reader-page bg-base-100 text-base-content full-height select-none overflow-hidden',
         appService?.hasRoundedWindow && isRoundedWindow && 'window-border rounded-window',
       )}
     >
-      <Suspense fallback={<div className='h-[100vh]'></div>}>
+      <Suspense fallback={<div className='full-height'></div>}>
         <ReaderContent ids={ids} settings={settings} />
         <AboutWindow />
         <UpdaterWindow />
@@ -142,7 +142,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
       </Suspense>
     </div>
   ) : (
-    <div className={clsx('h-[100vh]', !appService?.isLinuxApp && 'bg-base-100')}></div>
+    <div className={clsx('full-height', !appService?.isLinuxApp && 'bg-base-100')}></div>
   );
 };
 
diff --git a/apps/readest-app/src/app/reader/components/ReaderContent.tsx b/apps/readest-app/src/app/reader/components/ReaderContent.tsx
index d56d17d7..f759f238 100644
--- a/apps/readest-app/src/app/reader/components/ReaderContent.tsx
+++ b/apps/readest-app/src/app/reader/components/ReaderContent.tsx
@@ -200,7 +200,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
     return (
       loading &&
       !errorLoading && (
-        <div className='hero hero-content h-[100vh]'>
+        <div className='hero hero-content full-height'>
           <Spinner loading={true} />
         </div>
       )
@@ -208,7 +208,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
   }
 
   return (
-    <div className='reader-content flex h-[100vh]'>
+    <div className='reader-content full-height flex'>
       <SideBar onGoToLibrary={handleCloseBooksToLibrary} />
       <BooksGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
       <Notebook />
diff --git a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
index 7a0b114a..f65d2a59 100644
--- a/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
+++ b/apps/readest-app/src/app/reader/components/notebook/Notebook.tsx
@@ -219,9 +219,8 @@ const Notebook: React.FC = ({}) => {
       <div
         className={clsx(
           'notebook-container right-0 flex min-w-60 select-none flex-col',
-          'font-sans text-base font-normal sm:text-sm',
+          'full-height font-sans text-base font-normal sm:text-sm',
           viewSettings?.isEink ? 'bg-base-100' : 'bg-base-200',
-          appService?.isIOSApp ? 'h-[100vh]' : 'h-full',
           appService?.hasRoundedWindow && 'rounded-window-top-right rounded-window-bottom-right',
           isNotebookPinned ? 'z-20' : 'z-[45] shadow-2xl',
           !isNotebookPinned && viewSettings?.isEink && 'border-base-content border-s',
diff --git a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
index 5d1c43d0..3f4d25ee 100644
--- a/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
+++ b/apps/readest-app/src/app/reader/components/sidebar/SideBar.tsx
@@ -240,9 +240,8 @@ const SideBar: React.FC<{
       <div
         className={clsx(
           'sidebar-container flex min-w-60 select-none flex-col',
-          'transition-[padding-top] duration-300',
+          'full-height transition-[padding-top] duration-300',
           viewSettings?.isEink ? 'bg-base-100' : 'bg-base-200',
-          appService?.isIOSApp ? 'h-[100vh]' : 'h-full',
           appService?.hasRoundedWindow && 'rounded-window-top-left rounded-window-bottom-left',
           isSideBarPinned ? 'z-20' : 'z-[45] shadow-2xl',
           !isSideBarPinned && viewSettings?.isEink && 'border-base-content border-e',
diff --git a/apps/readest-app/src/app/user/page.tsx b/apps/readest-app/src/app/user/page.tsx
index fea70b92..e79c536b 100644
--- a/apps/readest-app/src/app/user/page.tsx
+++ b/apps/readest-app/src/app/user/page.tsx
@@ -225,7 +225,7 @@ const ProfilePage = () => {
   return (
     <div
       className={clsx(
-        'bg-base-100 inset-0 h-[100vh] select-none overflow-hidden',
+        'bg-base-100 full-height inset-0 select-none overflow-hidden',
         appService?.hasRoundedWindow && isRoundedWindow && 'window-border rounded-window',
       )}
     >
diff --git a/apps/readest-app/src/styles/globals.css b/apps/readest-app/src/styles/globals.css
index 988855f0..81ea8f0f 100644
--- a/apps/readest-app/src/styles/globals.css
+++ b/apps/readest-app/src/styles/globals.css
@@ -53,6 +53,20 @@ body {
   }
 }
 
+.full-height {
+  height: -webkit-fill-available;
+}
+
+@supports (height: 100dvh) {
+  .full-height {
+    height: 100dvh;
+  }
+}
+
+:root.edge-to-edge .full-height {
+  height: 100vh !important;
+}
+
 foliate-view {
   display: block;
   width: 100%;