From b608dfc342a0cba0baa84de6f7a698a0e134ee8d Mon Sep 17 00:00:00 2001
From: Alexander Heldt <me@alexanderheldt.se>
Date: Wed, 15 Jul 2026 09:41:44 +0000
Subject: [PATCH] Show a compact year-less date in the day bar so it fits small
 iPhones

The native date input can't be told to drop the year, so a button face
shows e.g. "Jul 10" and the real input sits hidden behind it, still
holding the value and opening the native picker on tap.
---
 src/app.js         | 15 +++++++++++++++
 src/changelog.json |  1 +
 src/index.html     |  8 +++++++-
 src/style.css      | 19 ++++++++++++++++---
 4 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/app.js b/src/app.js
index c6f64c0..feb5cf5 100644
--- a/src/app.js
+++ b/src/app.js
@@ -1563,6 +1563,10 @@
     const isToday = ymd(day) === ymd(new Date());
     document.getElementById("day-next").disabled  = isToday;
     document.getElementById("day-today").disabled = isToday;
+    // Year-less date on the picker's face — the year is implicit and the
+    // saved width keeps the bar on one row on small phones.
+    document.getElementById("day-date-face").textContent =
+      day.toLocaleDateString(undefined, { month: "short", day: "numeric" });
     const title = document.getElementById("overview-title");
     if (title) {
       title.textContent = isToday
@@ -2355,6 +2359,17 @@
   dayPicker.value = ymd(new Date());
   dayPicker.addEventListener("change", render);
 
+  // The face opens the hidden input's native picker (iOS 16+ has showPicker;
+  // focus() is the fallback and is what pops the picker on older iOS anyway).
+  document.getElementById("day-date-face").addEventListener("click", () => {
+    try {
+      if (typeof dayPicker.showPicker === "function") dayPicker.showPicker();
+      else dayPicker.focus();
+    } catch {
+      dayPicker.focus();
+    }
+  });
+
   function shiftSelectedDay(days) {
     const d = selectedDay();
     d.setDate(d.getDate() + days);
diff --git a/src/changelog.json b/src/changelog.json
index 89dc3c1..9d018ed 100644
--- a/src/changelog.json
+++ b/src/changelog.json
@@ -1,4 +1,5 @@
 [
+  { "date": "2026-07-15", "text": "The date in the top bar is shorter (no year), so the whole bar fits on smaller iPhones" },
   { "date": "2026-07-13", "text": "The big timer is back at the top — scroll past it and it hops into the frozen bar instead" },
   { "date": "2026-07-13", "text": "The top bar fits on one row: timer, day arrows, date picker and Today" },
   { "date": "2026-07-13", "text": "Pick how many days the charts cover — 7, 14 or 30 (default 7)" },
diff --git a/src/index.html b/src/index.html
index b1abf77..8fc7053 100644
--- a/src/index.html
+++ b/src/index.html
@@ -86,7 +86,13 @@
           <span id="bar-clock-time"></span>
         </div>
         <button type="button" id="day-prev" class="ghost" aria-label="Previous day">←</button>
-        <input type="date" id="day-picker" />
+        <!-- A browser won't let us shorten the text a native date input shows,
+             so the face button carries a compact year-less date and the real
+             input stays (visually hidden) as the value + native picker. -->
+        <span class="day-date">
+          <button type="button" id="day-date-face" class="ghost"></button>
+          <input type="date" id="day-picker" tabindex="-1" aria-hidden="true" />
+        </span>
         <button type="button" id="day-next" class="ghost" aria-label="Next day">→</button>
         <button type="button" id="day-today" class="ghost">Today</button>
       </section>
diff --git a/src/style.css b/src/style.css
index 82c6f2e..620faea 100644
--- a/src/style.css
+++ b/src/style.css
@@ -147,10 +147,23 @@ body::before {
   flex-wrap: nowrap;
   padding: 8px 10px;
 }
-.day-bar input[type="date"] {
-  flex: 0 1 auto;
-  min-width: 0;
+/* The face button shows the short date; the real input sits invisibly behind
+   it so its native picker still anchors here (and .showPicker() has a target). */
+.day-date {
+  position: relative;
+  flex-shrink: 0;
+  display: inline-flex;
+}
+.day-date input[type="date"] {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  opacity: 0;
+  pointer-events: none;
+}
+#day-date-face {
   font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
 .day-bar button {
   padding: 8px 10px;