Try to fix edge-to-edge in PWA

web/app.html

@@ -5,7 +5,10 @@
     <link rel="icon" href="/favicon.ico" sizes="32x32" />
     <link rel="icon" href="/main/icon.svg" type="image/svg+xml" />
     <link rel="manifest" href="/manifest.webmanifest" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <meta name="theme-color" content="var(--land-color)" />
     <title>Slow Reader</title>
     <link

web/main/colors.css

@@ -192,6 +192,7 @@
   }
 
   .is-comfort-mode {
+    /* Don’t forget to change public/manifest.webmanifest */
     --land-color: oklch(0.25 0.03 70);
     --main-land-color: oklch(0.3 0.03 70);
     --secondary-text-color: oklch(0.7 0.05 70);

web/main/index.css

@@ -95,7 +95,7 @@ ol[role='list'] {
   }
 
   @media (--no-desktop) {
-    padding-bottom: var(--navbar-height);
+    padding-bottom: var(--bottom-panel-height);
   }
 
   /* Prevent double scroll on mobile */

web/main/sizes.css

@@ -9,6 +9,9 @@
   --page-padding: 1rem;
   --navbar-padding: 0.3125rem;
   --navbar-height: calc(var(--control-height) + 2 * var(--navbar-padding));
+  --bottom-panel-height: calc(
+    var(--navbar-height) + env(safe-area-inset-bottom)
+  );
 
   /* To separate scalable sizes from pixel-based */
   --min-size: 1px;

web/public/404.html

@@ -4,7 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" sizes="32x32" />
     <link rel="icon" href="/icon-error.svg" type="image/svg+xml" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <meta
       name="theme-color"
       media="(prefers-color-scheme: light)"

web/public/500.html

@@ -4,7 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon.ico" sizes="32x32" />
     <link rel="icon" href="/icon-error.svg" type="image/svg+xml" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, viewport-fit=cover"
+    />
     <meta
       name="theme-color"
       media="(prefers-color-scheme: light)"

web/public/manifest.webmanifest

@@ -1,6 +1,7 @@
 {
   "name": "Slow Reader",
   "background_color": "#fcecd9",
+  "theme_color": "#2b1f11",
   "display": "standalone",
   "start_url": "/app",
   "launch_handler": {

web/ui/navbar/index.svelte

@@ -194,8 +194,11 @@
         z-index: 2;
         justify-content: center;
         width: stretch;
-        height: var(--navbar-height);
+        height: var(--bottom-panel-height);
         padding-inline: 1rem;
+        padding-bottom: calc(
+          var(--navbar-padding) + env(safe-area-inset-bottom)
+        );
 
         .navbar:not(.is-opened) & {
           box-shadow: var(--bottom-panel-shadow);

web/ui/popup.svelte

@@ -129,6 +129,7 @@
         @mixin background var(--main-land-color);
 
         height: var(--navbar-height);
+        padding-bottom: env(safe-area-inset-bottom);
         box-shadow: var(--bottom-panel-shadow);
       }
     }
@@ -160,6 +161,7 @@
       overflow: hidden auto;
 
       @media (--mobile) {
+        height: calc(100% - var(--bottom-panel-height));
         padding: var(--page-padding);
       }
     }

web/ui/popupable-page.svelte

@@ -38,7 +38,7 @@
       }
 
       @media (--no-desktop) {
-        min-height: calc(100svh - var(--navbar-height));
+        min-height: calc(100svh - var(--bottom-panel-height));
       }
 
       @media (--mobile) {

web/ui/two-options-page.svelte

@@ -53,7 +53,7 @@
       min-height: 100svh;
 
       @media (--no-desktop) {
-        min-height: calc(100svh - var(--navbar-height));
+        min-height: calc(100svh - var(--bottom-panel-height));
       }
 
       &.is-center {