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; }