From 906d59052944ddb2902e066359152f45e4800ec2 Mon Sep 17 00:00:00 2001
From: Emi Griffith <me@emigriffith.dev>
Date: Thu, 16 Jul 2026 16:51:55 -0700
Subject: [PATCH] Collapse the header to the hamburger on tablets; drop tagline
 earlier (#155)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The inline header (logo + name + tagline + °F/°C + Sign in + six nav tabs) only
fits comfortably above ~1200px. Below that it squeezed the title/tagline into a
one-word-per-line sliver — worst around 700–1100px. The previous stopgap (trimming
tab padding) removed the scrollbar but not the crush.

Now the header is genuinely responsive:
- ≥1200px: full inline header with the tagline.
- 1081–1199px: inline nav, tagline hidden (title + controls with breathing room).
- ≤1080px: fold nav, °F/°C and account into the hamburger — a clean compact row
  (logo + name + hamburger).

The header-collapse rules moved from the ≤640px block to ≤1080px; the body keeps
its own ≤640px phone rules. Also drops the now-unneeded 641–1000px tab-padding hack.
No horizontal overflow at any width.
---
 static/style.css | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/static/style.css b/static/style.css
index 71eab26..1896c2a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -501,13 +501,6 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
 .view-nav a:hover { color: var(--text); }
 .view-nav a.active { background: var(--accent); color: #fff; }
 
-/* Small laptops / large tablets: the inline header (six tabs + °F/°C + account) is
-   tight, so trim the tab padding to keep the row from spilling past ~800px into a
-   horizontal scrollbar. Phones (≤640px) collapse into the hamburger instead. */
-@media (min-width: 641px) and (max-width: 1000px) {
-  .view-nav a { padding: 8px 11px; }
-}
-
 /* Hamburger wrapper. On desktop the menu and its panel are transparent
    (display:contents), so the nav pills plus the injected °F/°C toggle, bell and
    account render inline in the header row and the hamburger summary is hidden;
@@ -1337,11 +1330,18 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
   .day-nav { width: 100%; }
   .day-date { flex: 1; }
   .ladder-row { grid-template-columns: 13px 90px 46px 1fr 42px; column-gap: 8px; font-size: 12.5px; }
+}
 
+/* The full inline header (logo + name + tagline + °F/°C + Sign in + six nav tabs)
+   only fits comfortably on a wide screen; squeeze it and the tagline crushes the
+   title into a one-word-per-line sliver. So: hide the tagline below 1200px, and
+   below 1080px fold the nav, °F/°C and account into a hamburger dropdown, leaving a
+   clean compact header (logo + name + hamburger). The body keeps its ≤640px rules. */
+@media (max-width: 1199px) { .tag { display: none; } }
+
+@media (max-width: 1080px) {
   header { padding: 14px 16px; }
   h1 { font-size: 19px; }
-  /* Drop the tagline on phones so the header stays a tight single row. */
-  .tag { display: none; }
 
   /* One compact row: logo + name on the left, the hamburger flush-right. The nav,
      °F/°C toggle, bell and account all fold into the hamburger dropdown below, so
@@ -1417,7 +1417,9 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
   .nav-panel .notif { position: static; }
   .nav-panel .notif-pop { right: 0; width: min(340px, calc(100vw - 24px)); }
   .acct-pop { max-width: calc(100vw - 40px); }
+}
 
+@media (max-width: 640px) {
   main { padding: 14px 14px 40px; }
   .controls { gap: 12px; margin-bottom: 14px; }