diff --git a/src/app.js b/src/app.js
index 291fd56..c49cb97 100644
--- a/src/app.js
+++ b/src/app.js
@@ -4781,12 +4781,20 @@
   // The tab bar sticks directly under the day bar, which means its `top` has to
   // be that bar's height — measured, because the bar's contents (and so its
   // height) differ between phones and orientations.
+  //
+  // A resize listener alone is not enough: the bar also grows the first time a
+  // sleep is logged, when the timer pill appears inside it, and that fires no
+  // resize. Watching the element covers both, and every other cause besides.
+  const dayBarEl = document.querySelector(".day-bar");
   function measureDayBar() {
-    const bar = document.querySelector(".day-bar");
-    if (!bar) return;
-    document.documentElement.style.setProperty("--day-bar-h", `${bar.offsetHeight}px`);
+    if (!dayBarEl) return;
+    document.documentElement.style.setProperty("--day-bar-h", `${dayBarEl.offsetHeight}px`);
+  }
+  if (dayBarEl && typeof ResizeObserver === "function") {
+    new ResizeObserver(measureDayBar).observe(dayBarEl);
+  } else {
+    addEventListener("resize", measureDayBar);
   }
-  addEventListener("resize", measureDayBar);
   measureDayBar();
 
   showTab(loadTab(), { scroll: false });
diff --git a/src/style.css b/src/style.css
index cf7eb59..76e325c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -198,6 +198,18 @@ main {
 }
 .tabs .tab:hover { filter: none; }
 
+/* Five labels have to fit without truncating on the narrow phones, and the
+   budget is tight: at a 320px viewport (iPhone SE, smaller Androids) the body's
+   own 16px gutters, the bar's padding and four gaps leave about 45px of text
+   per tab, while "Growth" — the widest label, roughly 3.3em — wants 46px at the
+   default size. So the same breakpoint the day bar already uses trims the type
+   and the padding, which takes the widest label to about 40px against 43px of
+   room even on a 280px foldable cover screen. */
+@media (max-width: 370px) {
+  .tabs { gap: 2px; padding-left: 2px; padding-right: 2px; }
+  .tabs .tab { font-size: 0.75rem; padding-left: 2px; padding-right: 2px; }
+}
+
 /* main's own gap sits between the pinned blocks and the tab area; each tab
    then spaces its own panels the same way. */
 .tab-panel {