No description
Previous layout used flex + clamp()-based intrinsic sizing, which worked
until the rain%/wind additions made hourly cards tall enough to push total
content past 100vh -- overflow was silently clipped rather than scrolling
(the container has overflow:hidden by design for a kiosk screen), so the
bottom of the page (daily row / "updated" footer) could vanish depending on
viewport height.
Now .wx-display is a CSS grid with explicit rows (auto for header/now/label
rows, minmax(0, 1fr) for the two content rows) that always sum to exactly
100vh. Each 1fr row's direct child gets min-height:0 + overflow:hidden so it
actually respects its shrunk allotment instead of forcing the track to grow
-- the standard CSS grid overflow gotcha. Wrapped the next-2-days + daily
row together in a new .wx-coming-up flex column so they share one grid
track instead of each claiming independent space.
Also: rain% + wind now render on one line ("12% · SW 8mph") instead of two
stacked lines, trimming card height further.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
|
||
|---|---|---|
| backend | ||
| frontend | ||
| .gitignore | ||
| docker-compose.yml | ||
| seed-app.js | ||