Fit the whole top bar on one row

Timer, day arrows, date picker and Today all share a single non-wrapping
row: the timer slims to 1rem, buttons and gaps tighten, arrows sit
around the picker, and a narrow-phone media query compacts further.

src/changelog.json

@@ -1,4 +1,5 @@
 [
+  { "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)" },
   { "date": "2026-07-13", "text": "Much finer y-axis on the food chart" },
   { "date": "2026-07-13", "text": "The awake/asleep timer is bigger and sits first in the top bar" },

src/index.html

@@ -86,8 +86,8 @@
         </div>
         <button type="button" id="day-prev" class="ghost" aria-label="Previous day">←</button>
         <input type="date" id="day-picker" />
-        <button type="button" id="day-today" class="ghost">Today</button>
         <button type="button" id="day-next" class="ghost" aria-label="Next day">→</button>
+        <button type="button" id="day-today" class="ghost">Today</button>
       </section>
 
       <section class="quick-actions">

src/style.css

@@ -141,10 +141,10 @@ body::before {
   top: env(safe-area-inset-top, 0px);
   z-index: 60;
   display: flex;
-  gap: 8px;
+  gap: 6px;
   align-items: center;
   justify-content: flex-end;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
   padding: 8px 10px;
 }
 .day-bar input[type="date"] {
@@ -153,9 +153,15 @@ body::before {
   font-variant-numeric: tabular-nums;
 }
 .day-bar button {
-  padding: 8px 14px;
+  padding: 8px 10px;
   flex-shrink: 0;
 }
+/* Keep the single row intact on narrow phones. */
+@media (max-width: 370px) {
+  .day-bar { gap: 4px; }
+  .day-bar button { padding: 8px 7px; }
+  .bar-clock { font-size: 0.9rem; padding: 6px 8px; gap: 5px; }
+}
 .day-bar button:disabled {
   opacity: 0.4;
   cursor: not-allowed;
@@ -163,12 +169,12 @@ body::before {
 .bar-clock {
   display: flex;
   align-items: center;
-  gap: 8px;
+  gap: 6px;
   margin-right: auto; /* pin left; the flexible gap sits between it and the day controls */
-  padding: 8px 16px;
+  padding: 7px 10px;
   border-radius: 999px;
   font-weight: 700;
-  font-size: 1.15rem;
+  font-size: 1rem;
   font-variant-numeric: tabular-nums;
   flex-shrink: 0;
 }