[Design polish] Use standard border radius of 12px for tables and cards

[shawnborton]

Right now tables use 8px border radius, whereas content cards use 16px. Both are basically similar components in the sense that they are cards that use a different background color to wrap content.

Let's try to harmonize and use 12px as the border radius for these components.

Issue Owner

Current Issue Owner: @huult

[shawnborton]

@MelvinBot can you try to implement this please? Please create a new var for border radius that has a value of 12, and apply it to:

• all tables in Spend, Workspace Editor, Domain Editor, Account
• all tables in RHP flows like Merge Expense, Add expense to report, etc
• all widget cards on the Home page
• all cards that contain content in the Workspace Editor (Overview, Reports, Time, etc)
• all cards that contain content in Domain Editor (SAML)
• all cards that contain content in Account

[MelvinBot]

🤖 Draft PR created: Use a shared 12px border radius for tables and content cards

Please mark it as "Ready for review" when it is ready.

What it does

Adds componentBorderRadiusCardAndTable: 12 to src/styles/variables.ts:52 and applies it to the shared styles each surface already routes through, so this is one value change per style rather than a sweep of individual screens:

Style	Was	Covers
tableTopRadius / tableBottomRadius	8	Every table's outer corners — components/Table (Workspace editor, Domain editor, Account), Spend/Search tables, the report transaction table, and RHP tables like Merge Expense. Table skeletons use the same styles, so they stay in sync.
getSearchTableHighlightBorderRadius	8	Row highlight animation on narrow layouts, so it matches the table it sits in.
cardSectionContainer	16	The Section component — content cards in the Workspace editor (Overview, Reports, Time…), Domain editor (SAML) and Account.
widgetContainer	16	Home page widget cards.
transactionListItemStyle	8 (hardcoded)	Transaction rows. Search tables already override this per row, so the visible effect is on standalone lists like Add expense to report.

componentBorderRadius: 8 and componentBorderRadiusLarge: 16 are untouched, so nothing outside tables and content cards moves.

Two things worth your call

1. Variable name. I went with componentBorderRadiusCardAndTable because the existing scale (Small 4, Medium 6, Normal 8, Large 16) has no slot for 12 and a size-based name would be ambiguous. Happy to rename it if you'd prefer something like componentBorderRadiusSurface.
2. Add expense to report. Those rows are individually rounded rather than being one table with rounded outer corners, so I moved the row radius to 12 as well. If you'd rather that list keep 8px rows, say so and I'll pull that one line back out.

Testing status

npm run typecheck, npm run lint-changed, the React Compiler compliance check, and the two unit tests that assert on the highlight border radius all pass.

No screenshots though — the browser session for this run was stuck on a blank page after a failed onboarding step, so I could not visually confirm the new radius anywhere. That verification is still outstanding, and it's the part that matters most for a design polish change.

---

Next Steps: Reply with @MelvinBot <your feedback> to adjust the naming or scope.