From 9670ef44031cc4f80588ec44848b814e252df334 Mon Sep 17 00:00:00 2001
From: Andrey Sitnik <andrey@sitnik.ru>
Date: Sat, 6 Dec 2025 22:48:45 +0000
Subject: [PATCH] Improve SPA UI integration to the system

---
 web/index.html               |  5 ++++-
 web/main/index.css           | 22 ++++++++++++++++++++++
 web/main/sizes.css           |  4 ++++
 web/ui/navbar/index.svelte   | 22 ++++++----------------
 web/ui/popup.svelte          |  4 ++++
 web/ui/popupable-page.svelte |  4 +++-
 6 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/web/index.html b/web/index.html
index e5f249cb..ebfa5986 100644
--- a/web/index.html
+++ b/web/index.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 4e18219a..5b0f6454 100644
--- a/web/main/index.css
+++ b/web/main/index.css
@@ -33,6 +33,7 @@
 
 html,
 body {
+  box-sizing: border-box;
   height: 100dvh;
   margin: 0;
   overflow: hidden;
@@ -41,6 +42,27 @@ body {
 body {
   color: var(--text-color);
   -webkit-tap-highlight-color: oklch(0 0 0 / 0%);
+
+  @media (display-mode: browser) {
+    /* Change mobile Chrome bottom panel to fit with navbar */
+    background: var(--land-color);
+
+    @media (--no-desktop) {
+      :root.has-navbar & {
+        background: var(--main-land-color);
+
+        /* For Safari */
+        @supports (-webkit-touch-callout: none) {
+          background: var(--land-color);
+        }
+      }
+    }
+  }
+
+  @media (display-mode: standalone) {
+    padding-top: env(safe-area-inset-top);
+    background: var(--land-color);
+  }
 }
 
 body,
diff --git a/web/main/sizes.css b/web/main/sizes.css
index cbb06d1c..ddf0f977 100644
--- a/web/main/sizes.css
+++ b/web/main/sizes.css
@@ -39,6 +39,10 @@
     --popup-size: 100vw;
     --control-height: 2.25rem;
   }
+
+  @media (display-mode: standalone) {
+    --navbar-height: calc(var(--navbar-height) + env(safe-area-inset-bottom));
+  }
 }
 
 /* Update also web/stores/media-queries.ts */
diff --git a/web/ui/navbar/index.svelte b/web/ui/navbar/index.svelte
index dd2377f4..922d6a07 100644
--- a/web/ui/navbar/index.svelte
+++ b/web/ui/navbar/index.svelte
@@ -187,22 +187,6 @@
 
 <style lang="postcss">
   :global {
-    /* Change mobile Chrome bottom panel to fit with navbar */
-    body {
-      background: var(--land-color);
-
-      @media (--no-desktop) {
-        :root.has-navbar & {
-          background: var(--main-land-color);
-
-          /* For Safari */
-          @supports (-webkit-touch-callout: none) {
-            background: var(--land-color);
-          }
-        }
-      }
-    }
-
     .navbar {
       position: fixed;
       inset-block: 0;
@@ -243,6 +227,12 @@
         .navbar:not(.is-opened) & {
           box-shadow: var(--bottom-panel-shadow);
         }
+
+        @media (display-mode: standalone) {
+          padding-bottom: calc(
+            env(safe-area-inset-bottom) + var(--navbar-padding)
+          );
+        }
       }
     }
 
diff --git a/web/ui/popup.svelte b/web/ui/popup.svelte
index 63be5e76..79b5e3c8 100644
--- a/web/ui/popup.svelte
+++ b/web/ui/popup.svelte
@@ -128,6 +128,10 @@
 
         height: var(--navbar-height);
         box-shadow: var(--bottom-panel-shadow);
+
+        @media (display-mode: standalone) {
+          padding-bottom: env(safe-area-inset-bottom);
+        }
       }
     }
 
diff --git a/web/ui/popupable-page.svelte b/web/ui/popupable-page.svelte
index f5a648c6..87f3e095 100644
--- a/web/ui/popupable-page.svelte
+++ b/web/ui/popupable-page.svelte
@@ -38,7 +38,9 @@
       }
 
       @media (--no-desktop) {
-        min-height: calc(100svh - var(--navbar-height));
+        min-height: calc(
+          100svh - var(--navbar-height) - env(safe-area-inset-top)
+        );
       }
 
       @media (--mobile) {