Give the Plans & billing tab its page gutter and section surfaces

Fixkamo-internal
Shipped
August 11, 2026 at 1:38 PM UTC
Author
kamo
Commit
8c9c10d

The console rendered flush against the settings card on all four sides. Nothing in the container chain pads a tab child — SettingsView's card, its inner Box, TabPanel and the motion wrapper are all zero — so each tab supplies its own gutter, and this one never did. Every sibling tab does (p:4, p:{xs:2,md:3}, p-6), which is why only this page looked wrong. The gutter has to reach all four return paths, not just the main one. The loading skeleton and the two failure Alerts returned before the root Box, so they were flush no matter what the root carried — and those are the states seen first. Also from a five-lens audit of the surface: - Sections were separated by bare Dividers running edge to edge, leaving the tab as one undifferentiated column. Each is now a bordered surface, which also retires the trailing Divider that could dangle under the save button when both panels below it rendered nothing. - The tab opened with no title while every other tab on this page opens with SettingsSectionHeader. Added. - Selecting a plan swapped a 1px border for 2px, reflowing the whole row on every click. The ring is now an inset shadow, so selection costs no layout. - The billing-cycle control was three loose flex items in a wrapping row, so the switch could wrap away from its own labels. Grouped. - Estimate leader rows could not wrap and the dotted leader collapsed to nothing under a long or translated label, stranding the price. They wrap now, the leader keeps a floor width, and the amount never shrinks. - Radio options had no row gap at all (MUI's FormGroup ships none), so four two-line options ran together; and the circle centred against a two-line label sat in the gap between title and help text. Spaced and top-aligned. - The seat-cap field's label truncated to "Most seats one payer may b…" and hid its "No limit" placeholder. Pinned above the field. - Switch and IconButton rows sat indented under their own headings by the controls' internal touch padding. Cancelled. - Storage tiles were 4px bottom-heavy: MUI's CardContent :last-child rule outranks the p shorthand. - Operator-label eyebrows forced uppercase and 0.12em tracking onto Arabic, CJK, Indic and Thai. They now go through operatorLabelClass, the existing helper for exactly this. That also drops six sx fontSize overrides that were dead anyway — tailwind's important:true makes the class's own font-size win.

All changes

Like what you see shipping?

Every one of these updates lands in your workspace automatically. Start free and watch it grow week after week.

Start Free ForeverView Pricing