From 485aa9728dd9feab6e499a67433f02d5158e6a13 Mon Sep 17 00:00:00 2001
From: Hans de Zwart <git@hansdezwart.info>
Date: Tue, 11 Aug 2026 18:25:27 +0200
Subject: [PATCH] Fit the settings sheet on the screen again
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adding the presets heading pushed the sheet past the bottom of the
screen. It was closer to the edge than it looked: at 390x844 the old
content cleared the bottom by 10px, so 49px of new row tipped it over.

Height alone couldn't fix it. Measured in real viewports the content was
733px at 390 wide and 750px at 375 — and a 375x667 phone is 667px tall,
so on that screen no max-height reaches the content at all. It had to get
shorter. Raising the cap 88dvh -> 92dvh does the rest, and stops there:
the scrim is what you tap to dismiss (scrim's click handler closes
whichever sheet is open), and the sheet's top padding is a flat 8px with
no safe-area inset, so a full-height sheet would tuck the grab handle
under the notch.

Trimmed the row padding 16 -> 14, the grab handle, the Done margin and
padding, the hint margin and the presets gap: content down to 685px at
390 wide, which clears the top of the screen by 159px. The two smallest
phone sizes still scroll, by 88px at 375x667 — the rest of the fat there
is description text wrapping to three lines in the narrow left column,
which needs the copy or the row layout changed, not more spacing.

The score sheet shares .row and got the same trim: 466px, fits at every
size tested.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 public_html/index.html | 17 ++++++++++-------
 public_html/sw.js      |  2 +-
 2 files changed, 11 insertions(+), 8 deletions(-)

diff --git a/public_html/index.html b/public_html/index.html
index ff59168..fcb1381 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -222,18 +222,21 @@
     padding:8px 22px max(22px,env(safe-area-inset-bottom));
     transform:translateY(101%);
     transition:transform .26s cubic-bezier(.32,.72,0,1);
-    max-height:88vh;max-height:88dvh;overflow-y:auto;
+    max-height:92vh;max-height:92dvh;overflow-y:auto;   /* the scroll is a safety net for the smallest screens, not the normal case */
     overscroll-behavior:contain;     /* scrolling the sheet can't rubber-band the app */
     box-shadow:0 -18px 50px rgba(0,0,0,.45);
   }
   .sheet.on{transform:translateY(0)}
 
-  .grab{width:38px;height:4px;border-radius:99px;background:#4A4644;margin:6px auto 18px}
+  .grab{width:38px;height:4px;border-radius:99px;background:#4A4644;margin:5px auto 11px}
 
+  /* the sheet is meant to be read without scrolling, and it grew a row; the
+     spacing here, on .grab, .done and .hint is set so the whole thing lands
+     inside a phone screen rather than running off the bottom */
   .row{
     display:flex;align-items:center;justify-content:space-between;
     gap:16px;
-    padding:16px 0;
+    padding:14px 0;
     border-top:1px solid var(--sheet-line);
   }
   .row:first-of-type{border-top:0}
@@ -250,7 +253,7 @@
 
   /* three buttons wide enough to read can't share a line with a label, so the
      row stacks at every width rather than only under the .row--wide breakpoint */
-  .row--presets{flex-direction:column;align-items:stretch;gap:12px}
+  .row--presets{flex-direction:column;align-items:stretch;gap:10px}
   .presets{display:flex;gap:11px}
   .preset{
     flex:1;
@@ -309,8 +312,8 @@
   .toggle[aria-checked="true"]::after{transform:translateX(21px)}
 
   .done{
-    width:100%;margin-top:20px;
-    padding:15px;border:0;border-radius:13px;
+    width:100%;margin-top:14px;
+    padding:13px;border:0;border-radius:13px;
     background:var(--accent);color:var(--accent-ink);
     font-family:var(--ui);font-size:15.5px;font-weight:700;
     cursor:pointer;
@@ -318,7 +321,7 @@
 
   .hint{
     font-size:12px;color:var(--sheet-dim);
-    text-align:center;margin-top:13px;line-height:1.45;
+    text-align:center;margin-top:9px;line-height:1.45;
   }
 
   @media (prefers-reduced-motion:reduce){
diff --git a/public_html/sw.js b/public_html/sw.js
index 6af6998..fda7104 100644
--- a/public_html/sw.js
+++ b/public_html/sw.js
@@ -1,5 +1,5 @@
 /* Cache-first: once installed the clock never touches the network again. */
-const CACHE = "bgclock-v13";
+const CACHE = "bgclock-v14";
 const FILES = [
   "./",
   "./index.html",