Products area UX polish: stale status
The coders of epic 5631 (Tasks 5651, 5652 and 5653) found these UI issues while testing in a browser. The project instructions ask for them to be filed as one itemized task. The coders could not file it themselves (403), so it is filed here. Each item is a one-line requirement. Verify each item before changing it.
1. **A stale product still shows the green "Offered" chip.** In `apps/web/src/pages/products/HostingPricesSection.tsx:172-177`, the status chip ignores `row.allowed === false`. A stale instance row must show a warning-tone "Not orderable" chip, not "Offered", in addition to the exclamation icon.
2. **The Products tab strip at 480px** cuts off "Hosting terms" and hides Plans and Jaah AI with no hint. Make the strip scroll with visible scroll affordances, or wrap it, so every tab can be reached and is visibly present at 480px.
3. **Wrong section label.** `HostingPricesSection.tsx:232` has `aria-label="Hosting prices"`. It must match the visible title, "Hosting products".
4. **No Retry in the Add instance type dialog.** When the allow-list fails to load in `HostingPriceDialog.tsx`, there is no Retry. Add one.
5. **Picker error is not wired up.** The "Pick an instance type." error must be linked to the picker through `aria-describedby`/`aria-invalid`, and focus must move to the picker when a submit fails.
6. **Picker filters wrap at desktop.** Inside the dialog, the filters wrap to two lines at 1440px. Fit them on one line at desktop width.
7. **Allow button on phones.** In Instance types › Browse at phone width, the disabled "Allow" button sits on its own line above the filters. Show it only once something is ticked, or put it in a sticky footer.
8. **vCPU and RAM range fields on phones.** At 480px they add two filter lines. Fold them into one "Size" filter on phones.
9. **Search results don't land on the row.** A Settings search hit for a moved knob opens the right Products tab but does not scroll to or highlight the row. Scroll to it and highlight it, as Settings does for its own hits.
10. **"Get started" panel covers content.** On operator pages it takes about 220px at 1440px, which hides the Browse Network column, and at 480px it covers the last list rows. Reserve its height, as the sticky Save bar does, or collapse it once dismissed.
Out of scope: server APIs and guards, the allow-list semantics, knob keys and permissions, the tenant `HostingPicker`, Shared tiers and storage sizes behaviour, and server message wording (Task 5712).
Done means:
- Item 1: a component test where a row with `allowed:false` shows "Not orderable" and does not show "Offered".
- Item 2: a Playwright check at 480px that every Products tab is reachable, with no horizontal page scroll.
- Item 3: a role query finds the region by the name "Hosting products".
- Items 4-5: component tests cover Retry refetching and the error's `aria-describedby` plus focus.
- Items 6-10: screenshots at 1440px and 480px in the report, before and after.
- `./dc check quick` is green, PR CI is green, and Jaah Deploy succeeds for the merge.
Outcome
All 10 Products polish items fixed and verified (tests + 1440/480 screenshots); PR #4988 merged, CI green, Jaah Deploy succeeded on dev. Full gate: 2 flaky smoke tests passed on re-run. Deferred: 4 picker nits + a deploy job missing a timeout (task filing 403).
Artifacts
Activity
- Ready
- Runner started
- Runner ended (done)