[rchlfryn]

Description

Makes the Mountain Weather page work on a phone and tightens up its tables. On a phone, nothing scrolls sideways any more: tables use a date toggle, the section tabs stay pinned under the header, and the page drops its card padding to give the tables room. On desktop, temperatures and wind sit level, wind strength is shown by shading, and the Extended section uses the same columns as temperatures and wind.

Related Issues

Feedback

Key Changes

Mobile fixes

• No sideways scrolling. Every table except temperatures shows one date at a time behind a date toggle. Precipitation's Total is its own option. Temperatures show every date in one table.
• Pinned section tabs. The section tabs stay pinned under the site header, edge to edge, with the current section's tab kept in view.
• More room for tables. The issuance card drops its border and padding on a phone.
• Zone page header fill. The zone page's weather table header had no fill: a Tailwind opacity modifier (bg-muted/50) rendered nothing, because the color variable holds a whole hsl() value. It now has a solid fill.
• Keys and toggles fit. The snow and wind keys wrap instead of scrolling. The section tabs and weather summary's zones no longer scroll vertically. The 12h/24h toggle sits under the table, across from the snow key.

Temperature and wind tables

• The two tables line up at xl and above, with rules between dates. Rows are 37px, matching the other tables.
• Wind cells are shaded by strength, with a key under the table. The wording stays as screen-reader text, and zone tables keep it visible.
• Lows are no longer bold. Wind direction is full size and every speed is bold. These two changes also apply to the zone tables, which share the cells.
• The Extended section uses the same 1:2 columns as temperatures and wind.

Precipitation without snow amounts

• Older forecasts never computed snow amounts. These now show water equivalent alone in one full-width 24-hour table, with no snow columns, key or 12h/24h toggle, and the title reads Precipitation.
• A total or zone snow amount is unknown when any precipitation in it has no snow amount.

How to test

1. On a phone (or below 768px), open /weather/forecast. Nothing should scroll sideways, every table except temperatures should have a date toggle.
2. On a phone, scroll down the page. The section tabs should stay pinned under the header. Tap each tab: the page should jump to that section, with its tab highlighted and in view.
3. Switch precipitation between 12h and 24h with the toggle under the table, and try Total.
4. At 1280px or wider, temperatures and wind should start and end level, and Extended should line up with them.
5. Open a forecast with no snow amounts. It should show one full-width 24-hour table with no toggle.
6. Check a zone's forecast page, which shares the wind and temperature cells.
7. Check that printing shows the full tables, not the toggles.

Screenshots / Demo video

Change dates to toggle for mobile view

Precip	Wind

Align bottom tables on desktop & add wind gradient

Migration Explanation

No migrations.

Future enhancements / Questions

• With announcement banners open, the pinned header and tabs together take a large share of a phone screen.
• Each table's date toggle works on its own.
• The WidgetZoneWeather tests get a 15s timeout. Each renders the whole issuance, desktop and phone tables both, and they ran past 5s locally when the whole suite ran in parallel. Each takes under a second on its own.
• Tested in the browser at 375px and 1400px with mock data, which tops out at Strong wind. The precipitation-only table was checked with a local fixture with snow ratios blanked.
• The precipitation zone heading rows on a phone use the same bg-muted/50 and still render without a fill. They're unchanged here.
• Not checked yet: the Playwright e2e suite, print, and the zone page in a browser (including its header fill).

[github-actions]

Preview deployment: https://featxnwac-weather-temp-wind-tables.preview.avy-fx.org

[github-actions]

🚀 This is included in version v1.27.0