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

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