Use dynamic viewport unit dvh to avoid page covered by toolbar and address bar in mobile browsers (#160)

CONTRIBUTING.md

@@ -77,10 +77,11 @@ Now you're all setup and can start implementing your changes.
 
 This project is a monorepo. The code for the `readest-app` is in the `app/readest-app` directory. Here are some useful scripts for developing the frontend only without compiling Tauri:
 
-| Command          | Description                                        |
-| ---------------- | -------------------------------------------------- |
-| `pnpm dev-web`   | Starts the development server for the web app only |
-| `pnpm build-web` | Builds the web app                                 |
+| Command                                    | Description                                        |
+| ------------------------------------------ | -------------------------------------------------- |
+| `pnpm dev-web`                             | Starts the development server for the web app only |
+| `TAURI_DEV_HOST=192.168.1.22 pnpm dev-web` | Start the dev server on a LAN address              |
+| `pnpm build-web`                           | Builds the web app                                 |
 
 Recommended Visual Studio Code plugins for development:
 

apps/readest-app/src/app/library/page.tsx

@@ -233,7 +233,7 @@ const LibraryPage = () => {
   }
 
   return (
-    <div className='library-page rounded-window bg-base-200/50 text-base-content flex h-full min-h-screen select-none flex-col overflow-hidden'>
+    <div className='library-page rounded-window bg-base-200/50 text-base-content flex h-dvh select-none flex-col overflow-hidden'>
       <div className='fixed top-0 z-40 w-full'>
         <LibraryHeader
           isSelectMode={isSelectMode}

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

@@ -33,7 +33,7 @@ const Reader: React.FC<{ ids?: string }> = ({ ids }) => {
   return (
     library.length > 0 &&
     settings.globalReadSettings && (
-      <div className='reader-page rounded-window bg-base-100 text-base-content min-h-screen select-none'>
+      <div className='reader-page rounded-window bg-base-100 text-base-content h-dvh select-none'>
         <Suspense>
           <ReaderContent ids={ids} settings={settings} />
           <AboutWindow />

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

@@ -145,7 +145,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
     setTimeout(() => setLoading(true), 300);
     return (
       loading && (
-        <div className={'hero hero-content min-h-screen'}>
+        <div className={'hero hero-content h-dvh'}>
           <Spinner loading={true} />
         </div>
       )
@@ -153,7 +153,7 @@ const ReaderContent: React.FC<{ ids?: string; settings: SystemSettings }> = ({ i
   }
 
   return (
-    <div className='flex h-screen'>
+    <div className='flex h-dvh'>
       <SideBar onGoToLibrary={handleCloseBooksToLibrary} />
       <BooksGrid bookKeys={bookKeys} onCloseBook={handleCloseBook} />
       <TTSControl />