diff --git a/src/changelog.json b/src/changelog.json
index 1d52d5b..ea72cb9 100644
--- a/src/changelog.json
+++ b/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" },
diff --git a/src/index.html b/src/index.html
index 48064bd..de8d71d 100644
--- a/src/index.html
+++ b/src/index.html
@@ -86,8 +86,8 @@
-
+
diff --git a/src/style.css b/src/style.css
index f0e1ea8..1a40b70 100644
--- a/src/style.css
+++ b/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;
}