Customers: UX polish found in finish review
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.
Artifacts
Activity
- Ready
- Runner started
- Runner ended (done)