Customers: UX polish found in finish review

Task 6120 · Done · Coder · created · updated

Epic 6048 (Customers) shipped and works on dev. The children's UI checks and the finish check (2026-10-13, operator on https://app.dev.jaah.ai, 1440 and 390 px) found these UX defects against Req 7 ("feed-like, tabbed pages, no prose on page", usable at every width). Each item is a 1–2 sentence requirement. Fix each in the existing component, and do not fork it. 1. Customer tab strip at 390px: the scroller's edge shows a clipped label ("‹ mits"). Fade or snap the overflow so no partial word shows, and keep the active tab fully visible. 2. Products: "Add product" is a bare "+" at desktop. Show the label next to the icon. 3. Products: names repeat the tier word ("Shared node · Shared (8 vCPU, 32 GB) · 20 GB"). Drop the duplicate. 4. Products: a terminated comp stays in the feed forever. Hide ended products behind a "Show ended" toggle. 5. Products: an Included copy in state `kept` has no actions (`routes/customers.py:380` offers actions only for live states). Offer Remove and Convert for kept copies too. 6. Products: a comp whose machine failed shows only ✕. Show the failure reason and a Retry. 7. Products: switches render as the plan editor's bordered table. Render them as feed rows with inline toggles. 8. Products: the billed-remove confirm button names the machine, so two same-size hostings can't be confused. 9. Settings tab: each setting carries description prose. Remove it, and use a tooltip only where a label is ambiguous (ui-copy-standards). 10. Limits at phone width: rows are uneven and Edit floats. Use the card layout the other tabs use. 11. Access at phone width: the members table scrolls sideways and clips Status. Use a card feed under 480px. Rename the ambiguous "Add member" vs "Add" buttons. 12. Security: the SsoTab sub-headings are larger than the Sign-in heading. Fix the heading levels. 13. Plan: "Stripe not connected" is stated twice. Show it once. 14. Billing: the Jaah AI block (820px) is narrower than the desk cards (960px). Use one width. 15. InvoicesCard: the invoice number wraps mid-token at 1440. At 390, the "Amount/Refunded" labels print after the values. Fix both. 16. BillingDetailsDialog: it shows "EU address: EU VAT number required." for a UK address with a UK VAT number. Show that message for EU countries only. 17. Send payment link: it emails nobody when no Owner/Admin has billing email on. Show the recipients first, and offer the billing-details email. 18. Billing: open billing notices show only inside Dunning. Show them always. 19. Customers list: an org whose only product is its plan's Included node reads "Comped". Read "Included" when nothing is operator-comped. 20. Deleted org page: Overview still shows Plan and Ends. Show who deleted it and when instead. 21. Compliance Delete sheet: DialogFacts stacks label and value at phone width. Use the two-column facts grid. 22. On phones, the "Get started" setup sheet covers about 110px of every operator page and dialog. Collapse it to a chip on operator routes. 23. Members-table org links still go through `/orgs/:id` (a redirect hop). Link to `/customers/:id` directly. Out of scope: no API semantics changes (a separate follow-up covers history/roster correctness); tenant Billing pages unchanged except shared components that keep identical tenant rendering; no new pricing; no money arithmetic. Done means: - Each numbered item is fixed, or explicitly declined with a one-line reason in the report. - Playwright screenshots on dev after Jaah Deploy at 1440 and 390 of the Products, Billing, Access, Limits, Settings and Security tabs and the Customers list, each judged usable: no horizontal page scroll, no clipped tab label, zero help paragraphs, names readable. - `./dc check full` green; the PR's Jaah Deploy to dev succeeds.

Outcome

22/23 Customers UX items fixed (item 5 declined: kept copy is its own billed row). PR #5313 merged, Jaah Deploy to dev green, screenshots checked at 1440 and 390. Gate green except one unrelated e2e flake (passes alone). 6 deferred follow-ups named in the report.

Pull request

Artifacts

Activity

  • Ready
  • Runner started
  • Runner ended (done)