fix(layout): refactor full height for edge to edge env and in browser env (#2582)

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

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

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>
   );

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>
   );
 };
 

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 />

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

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

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

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%;