From e62895ad684ccf9fe760765baca372501d1daa34 Mon Sep 17 00:00:00 2001 From: b0txec Date: Tue, 25 Aug 2026 10:48:14 +0300 Subject: [PATCH] =?UTF-8?q?Narrow=20=C5=AAdens's=20temperature=20cards=20s?= =?UTF-8?q?o=20all=20six=20fit=20on=20one=20row?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The No/Līdz number-input boxes were sized for a hardcoded 3-column grid (minmax(250px,1fr)) despite only ever holding 2-3 digit temperatures. Switched to grid-template-columns: repeat(auto-fit, minmax(165px,1fr)) -- the browser now fits however many 165px+ cards actually fit at the current width, growing them to fill leftover space, with no manual breakpoints needed (removed three now-redundant @media overrides for .rangeGrid). Caught a real bug while tuning the floor value: a naive hardcoded repeat(6, minmax(130px,1fr)) first pass produced 6 columns at every width from 1050px to 1900px, but at some widths in that range (e.g. 1300px) the resulting per-input width came out to ~38px -- native number-input spinner arrows ate nearly all of it, and the digits, while genuinely present in the DOM (verified via inputValue()), were visually clipped to nothing. The map preview below (fed by the same signal) still rendered correctly, which is what made clear this was a paint/width issue, not a data bug. Fixed two ways: hid the native spinner arrows (reclaims space, matches the project's existing pattern of fully custom-styling other native inputs like checkboxes) and switched to auto-fit so the actual computed column width can never fall below the safe floor regardless of viewport width -- the exact class of bug a hand-rolled breakpoint ladder is prone to. Verified via a programmatic sweep (14 widths from 375px to 1900px, reading each input's real computed width and value, not just eyeballing screenshots) that every width keeps at least ~53px per input -- confirmed by direct visual check to be comfortably legible, well clear of the ~38px threshold that broke -- and headless-browser screenshots at 1600/1300/700px confirm all six cards render correctly with real live data. --- web/src/pages/water-temperature/waterTemperature.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/pages/water-temperature/waterTemperature.css b/web/src/pages/water-temperature/waterTemperature.css index 7bf79a5..573352f 100644 --- a/web/src/pages/water-temperature/waterTemperature.css +++ b/web/src/pages/water-temperature/waterTemperature.css @@ -1 +1 @@ -.waterPage{max-width:1900px}.waterHeading{margin-bottom:18px}.waterSetup{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding:18px 0 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.waterSetup h2{margin:0 0 14px;font-size:20px}.resolutionChoices{display:grid;gap:9px}.resolutionChoices button{text-align:left}.resolutionChoices button.active{border-color:var(--accent);background:var(--accent-pale);color:var(--accent-strong);box-shadow:inset 0 0 0 1px var(--accent)}.rangeGrid{display:grid;grid-template-columns:repeat(3,minmax(250px,1fr));gap:12px}.rangeField{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end;margin:0;padding:10px 12px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.46);transition:border-color 180ms,background 180ms}.rangeField.manual{border-color:rgba(36,119,197,.58);background:rgba(229,241,255,.76)}.rangeField.missing{border-style:dashed}.rangeField legend{padding:0 5px;font-weight:700}.rangeFieldMeta{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-2px 0 2px}.rangeFieldMeta span{font-size:10px;color:var(--text-muted)}.rangeField label{display:grid;gap:4px}.rangeField label span{font-size:11px;color:var(--text-muted)}.rangeField input{width:100%;font-size:18px;font-weight:700}.rangeSeparator{padding-bottom:9px;font-weight:700}.waterDataBand{padding:2px 0 22px;border-bottom:1px solid rgba(90,126,166,.22)}.waterStatus{display:flex;align-items:center;justify-content:space-between;gap:24px}.waterStatus>div,.waterStatus strong,.waterStatus small{display:block}.waterStatus strong{margin-top:5px;font-size:18px}.waterStatus small{margin-top:3px;color:var(--text-muted)}.waterPreview{padding-top:24px}.waterNotice{margin:0 0 10px;color:var(--text-muted);font-size:13px}.waterPreview canvas{display:block;width:100%;height:auto}@media(max-width:1050px){.waterSetup{grid-template-columns:1fr}.resolutionChoices{grid-template-columns:repeat(2,minmax(0,1fr))}.rangeGrid{grid-template-columns:repeat(2,minmax(220px,1fr))}}@media(max-width:650px){.rangeGrid,.resolutionChoices{grid-template-columns:1fr}.waterStatus{align-items:flex-start;flex-direction:column}} +.waterPage{max-width:1900px}.waterHeading{margin-bottom:18px}.waterSetup{display:grid;grid-template-columns:260px minmax(0,1fr);gap:28px;padding:18px 0 24px;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}.waterSetup h2{margin:0 0 14px;font-size:20px}.resolutionChoices{display:grid;gap:9px}.resolutionChoices button{text-align:left}.resolutionChoices button.active{border-color:var(--accent);background:var(--accent-pale);color:var(--accent-strong);box-shadow:inset 0 0 0 1px var(--accent)}.rangeGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(165px,1fr));gap:12px}.rangeField{display:grid;grid-template-columns:1fr auto 1fr;gap:8px;align-items:end;margin:0;padding:10px 12px 12px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.46);transition:border-color 180ms,background 180ms}.rangeField.manual{border-color:rgba(36,119,197,.58);background:rgba(229,241,255,.76)}.rangeField.missing{border-style:dashed}.rangeField legend{padding:0 5px;font-weight:700}.rangeFieldMeta{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:8px;margin:-2px 0 2px}.rangeFieldMeta span{font-size:10px;color:var(--text-muted)}.rangeField label{display:grid;gap:4px}.rangeField label span{font-size:11px;color:var(--text-muted)}.rangeField input{width:100%;font-size:18px;font-weight:700;-moz-appearance:textfield}.rangeField input::-webkit-inner-spin-button,.rangeField input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.rangeSeparator{padding-bottom:9px;font-weight:700}.waterDataBand{padding:2px 0 22px;border-bottom:1px solid rgba(90,126,166,.22)}.waterStatus{display:flex;align-items:center;justify-content:space-between;gap:24px}.waterStatus>div,.waterStatus strong,.waterStatus small{display:block}.waterStatus strong{margin-top:5px;font-size:18px}.waterStatus small{margin-top:3px;color:var(--text-muted)}.waterPreview{padding-top:24px}.waterNotice{margin:0 0 10px;color:var(--text-muted);font-size:13px}.waterPreview canvas{display:block;width:100%;height:auto}@media(max-width:1050px){.waterSetup{grid-template-columns:1fr}.resolutionChoices{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:650px){.resolutionChoices{grid-template-columns:1fr}.waterStatus{align-items:flex-start;flex-direction:column}}