Jinemi/thermograph
4
0
Fork 0
Code Issues 2 Pull requests 3 Projects Releases Packages Wiki Activity Actions

Pin the °F/°C toggle to the header's top-right on all widths (#26)

Browse source 
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.
This commit is contained in:
Emi Griffith 2026-07-11 01:23:43 -07:00 committed by GitHub
parent 25f658b8d3
commit 20a4108397
1 changed files with 5 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
static/style.css
View file

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