From 29318005b22a747ea56faa4a8e1775a7b52e14ba Mon Sep 17 00:00:00 2001
From: Dallas Hoffman <dallashoff@gmail.com>
Date: Tue, 24 Dec 2024 14:42:28 -0500
Subject: [PATCH 1/2] Mobile style fixes

---
 internal/glance/static/main.css     | 9 ++++++++-
 internal/glance/templates/page.html | 2 +-
 2 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/internal/glance/static/main.css b/internal/glance/static/main.css
index 770eefb..9ae27ff 100644
--- a/internal/glance/static/main.css
+++ b/internal/glance/static/main.css
@@ -1701,6 +1701,11 @@ details[open] .summary::after {
     .weather-column-rain::before {
         background-size: 7px 7px;
     }
+
+    .search-input {
+        /* so that iOS Safari does not zoom the page when the input is focused */
+        font-size: 16px;
+    }
 }
 
 @media (max-width: 1190px) and (display-mode: standalone) {
@@ -1717,7 +1722,8 @@ details[open] .summary::after {
         padding-bottom: var(--safe-area-inset-bottom);
     }
 
-    .mobile-navigation-icons {
+    .mobile-navigation-icons,
+    .content-bounds {
         padding-bottom: var(--safe-area-inset-bottom);
         transition: padding-bottom .3s;
     }
@@ -1799,6 +1805,7 @@ details[open] .summary::after {
 .min-width-0        { min-width: 0; }
 .max-width-100      { max-width: 100%; }
 .height-100         { height: 100%; }
+.height-100dvh      { height: 100dvh; }
 .block              { display: block; }
 .inline-block       { display: inline-block; }
 .overflow-hidden    { overflow: hidden; }
diff --git a/internal/glance/templates/page.html b/internal/glance/templates/page.html
index 2a0c776..ebf384f 100644
--- a/internal/glance/templates/page.html
+++ b/internal/glance/templates/page.html
@@ -30,7 +30,7 @@
 {{ end }}
 
 {{ define "document-body" }}
-<div class="flex flex-column height-100">
+<div class="flex flex-column height-100dvh">
     {{ if not .Page.HideDesktopNavigation }}
     <div class="header-container content-bounds">
         <div class="header flex padding-inline-widget widget-content-frame">

From 4a14709f13df8eed699aab029aeb440fae7aa99a Mon Sep 17 00:00:00 2001
From: Svilen Markov <7613769+svilenmarkov@users.noreply.github.com>
Date: Thu, 26 Dec 2024 17:02:15 +0000
Subject: [PATCH 2/2] Tweak iOS fixes

---
 internal/glance/static/main.css         | 19 ++++++++++++-------
 internal/glance/templates/document.html |  1 +
 internal/glance/templates/page.html     |  2 +-
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/internal/glance/static/main.css b/internal/glance/static/main.css
index 9ae27ff..1d5c19a 100644
--- a/internal/glance/static/main.css
+++ b/internal/glance/static/main.css
@@ -330,7 +330,7 @@ html {
     scroll-behavior: smooth;
 }
 
-html, body {
+html, body, .body-content {
     height: 100%;
 }
 
@@ -1702,7 +1702,7 @@ details[open] .summary::after {
         background-size: 7px 7px;
     }
 
-    .search-input {
+    .ios .search-input {
         /* so that iOS Safari does not zoom the page when the input is focused */
         font-size: 16px;
     }
@@ -1713,7 +1713,11 @@ details[open] .summary::after {
         --safe-area-inset-bottom: env(safe-area-inset-bottom, 0);
     }
 
-    .list-collapsible-label:has(.list-collapsible-input:checked) {
+    .ios .body-content {
+        height: 100dvh;
+    }
+
+    .expand-toggle-button.container-expanded {
         bottom: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom));
     }
 
@@ -1722,12 +1726,15 @@ details[open] .summary::after {
         padding-bottom: var(--safe-area-inset-bottom);
     }
 
-    .mobile-navigation-icons,
-    .content-bounds {
+    .mobile-navigation-icons {
         padding-bottom: var(--safe-area-inset-bottom);
         transition: padding-bottom .3s;
     }
 
+    .mobile-navigation-offset {
+        height: calc(var(--mobile-navigation-height) + var(--safe-area-inset-bottom));
+    }
+
     .mobile-navigation-icons:has(.mobile-navigation-page-links-input:checked) {
         padding-bottom: 0;
     }
@@ -1804,8 +1811,6 @@ details[open] .summary::after {
 .shrink-0           { flex-shrink: 0; }
 .min-width-0        { min-width: 0; }
 .max-width-100      { max-width: 100%; }
-.height-100         { height: 100%; }
-.height-100dvh      { height: 100dvh; }
 .block              { display: block; }
 .inline-block       { display: inline-block; }
 .overflow-hidden    { overflow: hidden; }
diff --git a/internal/glance/templates/document.html b/internal/glance/templates/document.html
index c12a908..a26f854 100644
--- a/internal/glance/templates/document.html
+++ b/internal/glance/templates/document.html
@@ -3,6 +3,7 @@
 <head>
     {{ block "document-head-before" . }}{{ end }}
     <title>{{ block "document-title" . }}{{ end }}</title>
+    <script>if (navigator.platform === 'iPhone') document.documentElement.classList.add('ios');</script>
     <meta charset="UTF-8">
     <meta name="color-scheme" content="dark">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
diff --git a/internal/glance/templates/page.html b/internal/glance/templates/page.html
index ebf384f..e740d03 100644
--- a/internal/glance/templates/page.html
+++ b/internal/glance/templates/page.html
@@ -30,7 +30,7 @@
 {{ end }}
 
 {{ define "document-body" }}
-<div class="flex flex-column height-100dvh">
+<div class="flex flex-column body-content">
     {{ if not .Page.HideDesktopNavigation }}
     <div class="header-container content-bounds">
         <div class="header flex padding-inline-widget widget-content-frame">