From 5a0329e90e503c6def95ee242e19dc8752813adb Mon Sep 17 00:00:00 2001 From: Emi Griffith Date: Thu, 16 Jul 2026 05:38:26 -0700 Subject: [PATCH] Shrink in-bar Max/Min distribution text on mobile so 3-figure values fit (#122) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 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). --- static/style.css | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/static/style.css b/static/style.css index 3124272..d633b10 100644 --- a/static/style.css +++ b/static/style.css @@ -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 {