From 71bd9f3effba79111decd0b77e7758a35b79a2a5 Mon Sep 17 00:00:00 2001
From: Andrey Sitnik <andrey@sitnik.es>
Date: Thu, 1 Oct 2026 18:00:49 +0000
Subject: [PATCH 1/2] Set theme_color to use for bottom panel in PWA

---
 web/main/colors.css             | 1 +
 web/public/manifest.webmanifest | 1 +
 2 files changed, 2 insertions(+)

diff --git a/web/main/colors.css b/web/main/colors.css
index 239fa4a0..cc63ee93 100644
--- a/web/main/colors.css
+++ b/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);
diff --git a/web/public/manifest.webmanifest b/web/public/manifest.webmanifest
index b3054380..db67704b 100644
--- a/web/public/manifest.webmanifest
+++ b/web/public/manifest.webmanifest
@@ -1,6 +1,7 @@
 {
   "name": "Slow Reader",
   "background_color": "#fcecd9",
+  "theme_color": "#2b1f11",
   "display": "standalone",
   "start_url": "/app",
   "launch_handler": {

From fe98e6eeea3871658c8fe3b498c8a0b0d5c2190c Mon Sep 17 00:00:00 2001
From: Andrey Sitnik <andrey@sitnik.es>
Date: Thu, 1 Oct 2026 18:03:30 +0000
Subject: [PATCH 2/2] Add viewport-fit=cover

---
 web/app.html                   | 5 ++++-
 web/main/index.css             | 2 +-
 web/main/sizes.css             | 3 +++
 web/public/404.html            | 5 ++++-
 web/public/500.html            | 5 ++++-
 web/ui/navbar/index.svelte     | 5 ++++-
 web/ui/popup.svelte            | 2 ++
 web/ui/popupable-page.svelte   | 2 +-
 web/ui/two-options-page.svelte | 2 +-
 9 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/web/app.html b/web/app.html
index a353a14d..eb505e4f 100644
--- a/web/app.html
+++ b/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
diff --git a/web/main/index.css b/web/main/index.css
index 333d8aca..ba7948bc 100644
--- a/web/main/index.css
+++ b/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 */
diff --git a/web/main/sizes.css b/web/main/sizes.css
index be465dc9..be85a8f3 100644
--- a/web/main/sizes.css
+++ b/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;
diff --git a/web/public/404.html b/web/public/404.html
index 32af221a..f07f43f6 100644
--- a/web/public/404.html
+++ b/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)"
diff --git a/web/public/500.html b/web/public/500.html
index 08c35aac..db468c49 100644
--- a/web/public/500.html
+++ b/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)"
diff --git a/web/ui/navbar/index.svelte b/web/ui/navbar/index.svelte
index dd2a91da..6e88910f 100644
--- a/web/ui/navbar/index.svelte
+++ b/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);
diff --git a/web/ui/popup.svelte b/web/ui/popup.svelte
index c20d4f6e..cd6e8972 100644
--- a/web/ui/popup.svelte
+++ b/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);
       }
     }
diff --git a/web/ui/popupable-page.svelte b/web/ui/popupable-page.svelte
index f5a648c6..3f965ca7 100644
--- a/web/ui/popupable-page.svelte
+++ b/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) {
diff --git a/web/ui/two-options-page.svelte b/web/ui/two-options-page.svelte
index 6620b53e..98c5f2b8 100644
--- a/web/ui/two-options-page.svelte
+++ b/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 {