From 20a4108397da0c6b53624469d8b997c31a301b57 Mon Sep 17 00:00:00 2001 From: Emi Griffith Date: Sat, 11 Jul 2026 01:23:43 -0700 Subject: [PATCH] =?UTF-8?q?Pin=20the=20=C2=B0F/=C2=B0C=20toggle=20to=20the?= =?UTF-8?q?=20header's=20top-right=20on=20all=20widths=20(#26)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The unit toggle sat inside .brand after a flex-basis:auto title block, so on narrow (phone) widths the long tagline claimed the first row and bumped the toggle onto its own line mid-header. Give the title block flex:1 1 0 with min-width:0 so it contributes ~nothing to the wrap decision and shrinks instead — keeping the toggle on the logo's row, top-right, with the tagline wrapping beneath and the view tabs on their own row below. --- static/style.css | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/static/style.css b/static/style.css index 36762ca..09e3018 100644 --- a/static/style.css +++ b/static/style.css @@ -59,6 +59,10 @@ header { background: var(--surface); } .brand { display: flex; align-items: center; gap: 14px; } +/* The title block (logo's neighbour) grows and may shrink, so the unit toggle is + pushed to the top-right on the logo's row and the long tagline wraps inside it + instead of bumping the toggle onto its own line. */ +.brand > div:not(.unit-toggle) { flex: 1 1 0; min-width: 0; } .logo { font-size: 30px; color: var(--accent); @@ -248,7 +252,7 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; } /* --- header °F/°C unit toggle (sits at the top-right, left of the tabs) --- */ .unit-toggle { - margin-left: auto; align-self: center; display: inline-flex; gap: 2px; + margin-left: auto; align-self: center; flex-shrink: 0; display: inline-flex; gap: 2px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 11px; padding: 3px; }