From 64bc4a9a34775507b4023d41cf0cc31f171b2460 Mon Sep 17 00:00:00 2001
From: Hans de Zwart <git@hansdezwart.info>
Date: Tue, 11 Aug 2026 14:39:14 +0200
Subject: [PATCH] Stop the Time stepper overflowing the sheet on a phone
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The minutes+seconds stepper is 302px wide. With a label beside it the Time
row needs about 422px of viewport, so it has been running off the right edge
of the settings sheet on every phone narrower than that — measured 19px off
a 390pt iPhone, 34px off a 375pt SE and 89px at 320. The "00 SEC" value and
its + button were the part that got cut.

Below 420px the row now stacks: label on one line, stepper right-aligned
underneath with slightly narrower value columns. That needs 262px against
the 276px available at 320px. Wider screens keep the inline layout.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
---
 public_html/index.html | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/public_html/index.html b/public_html/index.html
index 24f62b8..0186adf 100644
--- a/public_html/index.html
+++ b/public_html/index.html
@@ -215,6 +215,14 @@
   .row h2{font-size:15px;font-weight:600;letter-spacing:.01em}
   .row p{font-size:12.5px;color:var(--sheet-dim);margin-top:3px;line-height:1.35}
 
+  /* a minutes+seconds stepper is 302px wide, so it can't share a line with a
+     label on any phone — stack it under one instead of overflowing the sheet */
+  @media (max-width:420px){
+    .row--wide{flex-direction:column;align-items:stretch;gap:10px}
+    .row--wide .stepper{align-self:flex-end}
+    .row--wide .val{min-width:46px}
+  }
+
   .row--presets{gap:11px}
   .preset{
     flex:1;
@@ -366,7 +374,7 @@
     <button class="preset" data-base="180000" data-preset-delay="15000" aria-pressed="false">3m / 15s</button>
   </div>
 
-  <div class="row">
+  <div class="row row--wide">
     <div>
       <h2>Time</h2>
       <p>Reserve time per player.</p>