chore(web): fix card radius hierarchy + replace rounded-[var(...)] arbitraries #210

New issue

Closed

opened 2026-04-21 10:29:15 +00:00 by claude-desktop · 1 comment

claude-desktop commented

2026-04-21 10:29:15 +00:00

Collaborator

User story

As a dashboard operator, I want a consistent border-radius hierarchy across cards and inputs, so that surfaces read as one coherent system instead of a mix of rounded-default and rounded-card applied interchangeably — and I want the two rounded-[var(--ch-radius-*)] arbitraries replaced with the canonical utility classes.

Dependencies

Blocked by #208 — canonical rounded-compact/default/card/pill utilities need to be confirmed exposed via @theme before we sweep call sites.

Acceptance criteria

Quick-win bug fixes

Replace the 2 occurrences of rounded-[var(--ch-radius-default)] and rounded-[var(--ch-radius-card)] with rounded-default / rounded-card respectively.

Hierarchy

Decide a radius convention (proposed: outer cards = rounded-card, inner inputs/buttons = rounded-compact, pills = rounded-pill, subtle edges = rounded-default).
Document the convention in apps/web/CLAUDE.md (create the file if missing).
Classify each of the 10 rounded-default uses and 33 rounded-card uses as outer/inner and migrate to the chosen convention.

Verification

bun run build + bun run qa clean.
Visual spot-check: routes/specs.tsx, routes/planner.index.tsx, components/pipeline-list.tsx, components/agent-chips.tsx.

Out of scope

Typography migration → separate ticket (independent).
Shadow depth system — audit flagged 7 uses of shadow-lg + 1 of shadow-sm; not in scope here. File a follow-up if the convention discussion surfaces a need.

References

Styling audit report (2026-04-21) — section 3 (arbitrary utilities) + section 6 (inconsistencies).

## User story As a dashboard operator, I want a consistent border-radius hierarchy across cards and inputs, so that surfaces read as one coherent system instead of a mix of `rounded-default` and `rounded-card` applied interchangeably — and I want the two `rounded-[var(--ch-radius-*)]` arbitraries replaced with the canonical utility classes. ## Dependencies - **Blocked by #208** — canonical `rounded-compact/default/card/pill` utilities need to be confirmed exposed via `@theme` before we sweep call sites. ## Acceptance criteria ### Quick-win bug fixes - [ ] Replace the 2 occurrences of `rounded-[var(--ch-radius-default)]` and `rounded-[var(--ch-radius-card)]` with `rounded-default` / `rounded-card` respectively. ### Hierarchy - [ ] Decide a radius convention (proposed: outer cards = `rounded-card`, inner inputs/buttons = `rounded-compact`, pills = `rounded-pill`, subtle edges = `rounded-default`). - [ ] Document the convention in `apps/web/CLAUDE.md` (create the file if missing). - [ ] Classify each of the 10 `rounded-default` uses and 33 `rounded-card` uses as outer/inner and migrate to the chosen convention. ### Verification - [ ] `bun run build` + `bun run qa` clean. - [ ] Visual spot-check: `routes/specs.tsx`, `routes/planner.index.tsx`, `components/pipeline-list.tsx`, `components/agent-chips.tsx`. ## Out of scope - Typography migration → separate ticket (independent). - Shadow depth system — audit flagged 7 uses of `shadow-lg` + 1 of `shadow-sm`; not in scope here. File a follow-up if the convention discussion surfaces a need. ## References - Styling audit report (2026-04-21) — section 3 (arbitrary utilities) + section 6 (inconsistencies).

claude-desktop added the

area:dashboard

type:chore

labels

2026-04-21 10:29:44 +00:00