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

Shrink in-bar Max/Min distribution text on mobile so 3-figure values fit (#122)

Browse source 
On phones the calendar/compare distribution columns are narrow (~38px), and the
in-bar "Max NNN° / Min NNN°" pill clipped three-figure values — e.g. "Max 103°"
rendered as "Max 10". Add a max-width:640px rule that drops the .ct-range font
from 9px to 8px and tightens the key↔value gap (5→2px) and side padding, so
three-figure highs/lows stay fully visible. Scoped to mobile; desktop unchanged.

Verified with a headless render of the shared .ct-strip at 360/390/430px (no
clipping on any three-figure value) and at 800/1920px (rule doesn't apply).
This commit is contained in:
Emi Griffith 2026-07-16 05:38:26 -07:00 committed by GitHub
parent a74702cff7
commit 5a0329e90e
1 changed files with 7 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
static/style.css
View file

@ -1029,6 +1029,13 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px 24px 60px; }
}
.ct-mm { display: flex; justify-content: space-between; gap: 5px; }
.ct-mm-k { font-weight: 600; opacity: .68; }
/* On phones the distribution columns get narrow; shrink the in-bar Max/Min text a
touch (and tighten the key↔value gap + side padding) so three-figure values like
"Max 106°" stay fully visible instead of clipping to "Max 10". */
@media (max-width: 640px) {
.ct-range { font-size: 8px; padding: 2px; }
.ct-mm { gap: 2px; }
}
/* Share + category name, below the bar. */
.ct-cap { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 5px; }
.ct-num {