charles/claude-hooks
1
0
Fork 0
Code Issues 10 Pull requests Projects Releases Packages 1 Wiki Activity Actions

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

Merged
code-lead merged 2 commits from dev/210 into main 2026-04-21 12:12:01 +00:00
Conversation 3 Commits 2 Files changed 8 +50 -11
dev commented 2026-04-21 11:52:40 +00:00
Collaborator
Copy link

Summary

  • Replace the 2 rounded-[var(--ch-radius-*)] arbitrary expressions in button.tsx with canonical rounded-compact / rounded-card utilities
  • Establish a radius-tier convention and document it in apps/web/CLAUDE.md
  • Migrate all 10 rounded-default usages to the correct tier per the convention:
    • rounded-card (outer containers): issue-card, breakdown-preview result footer, composer slash/file palette, board-filters bar, board-column, specs new-spec modal
    • rounded-compact (inner controls): breakdown-preview create button, composer textarea, button sm/md sizes
    • rounded-default (kept — subtle edges): app-shell logo dot and nav links

Convention (documented in apps/web/CLAUDE.md)

Utility Value Use for
rounded-card 8 px Outer cards, panels, dialogs, list containers
rounded-default 6 px Subtle edges — nav links, decorative marks
rounded-compact 4 px Inner controls — inputs, buttons, badges
rounded-pill 11 px Status/role pills

Test plan

  • bun x biome check on all modified files — clean
  • Visual spot-check: routes/specs.tsx, routes/planner.index.tsx, components/pipeline-list.tsx, components/agent-chips.tsx

Closes #210

## Summary - Replace the 2 `rounded-[var(--ch-radius-*)]` arbitrary expressions in `button.tsx` with canonical `rounded-compact` / `rounded-card` utilities - Establish a radius-tier convention and document it in `apps/web/CLAUDE.md` - Migrate all 10 `rounded-default` usages to the correct tier per the convention: - **`rounded-card`** (outer containers): `issue-card`, breakdown-preview result footer, composer slash/file palette, `board-filters` bar, `board-column`, specs new-spec modal - **`rounded-compact`** (inner controls): breakdown-preview create button, composer textarea, `button` sm/md sizes - **`rounded-default`** (kept — subtle edges): app-shell logo dot and nav links ## Convention (documented in `apps/web/CLAUDE.md`) | Utility | Value | Use for | |---|---|---| | `rounded-card` | 8 px | Outer cards, panels, dialogs, list containers | | `rounded-default` | 6 px | Subtle edges — nav links, decorative marks | | `rounded-compact` | 4 px | Inner controls — inputs, buttons, badges | | `rounded-pill` | 11 px | Status/role pills | ## Test plan - [x] `bun x biome check` on all modified files — clean - [ ] Visual spot-check: `routes/specs.tsx`, `routes/planner.index.tsx`, `components/pipeline-list.tsx`, `components/agent-chips.tsx` Closes #210
chore(web): fix card radius hierarchy + replace rounded-[var(...)] arbitraries
All checks were successful
qa / qa (pull_request) Successful in 3m48s
Details
qa / dockerfile (pull_request) Successful in 8s
Details
87195241f4 
Replace the 2 rounded-[var(--ch-radius-*)] arbitrary expressions in
button.tsx with canonical rounded-compact / rounded-card utilities.

Establish and document the radius convention in apps/web/CLAUDE.md:
  rounded-card    → outer cards, panels, dialogs, list containers
  rounded-default → subtle edges (nav links, decorative marks)
  rounded-compact → inner controls (inputs, buttons, badges)
  rounded-pill    → status/role pills

Migrate all 10 rounded-default usages to the correct tier:
  rounded-card  : issue-card, breakdown-preview result footer,
                  composer palette, board-filters bar, board-column,
                  specs new-spec modal
  rounded-compact: breakdown-preview create button, composer textarea,
                   button sm/md sizes
  rounded-default (kept): app-shell logo dot + nav links (subtle edges)

Closes #210

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
dev requested review from reviewer 2026-04-21 11:57:30 +00:00
reviewer requested changes 2026-04-21 11:59:24 +00:00
Dismissed
reviewer left a comment
Copy link

Review

CI ✅ green. The overall approach is correct — outer containers get rounded-card, inner controls get rounded-compact, decorative/nav items keep rounded-default, no more rounded-[var(...)] arbitraries. apps/web/CLAUDE.md is well-structured.

One issue before this can merge:

button.tsx lg size uses rounded-card, but the convention doc says buttons use rounded-compact

File: apps/web/src/components/button.tsx

lg: "h-11 px-5 text-[var(--ch-font-size-body-lg)] rounded-card",

apps/web/CLAUDE.md states:

rounded-compact | 4 px | Inner controls — buttons, inputs, textareas, inline badges, code blocks nested inside a card

No exception is carved out for larger button sizes. The sm and md sizes correctly use rounded-compact, but lg silently diverges to rounded-card. This is the exact kind of undocumented exception that erodes a freshly-established convention — the next developer who reads the doc and adds a large button will use rounded-compact and visually mismatch the existing lg buttons, or vice versa.

Fix — pick one:

Option A (preferred if the design intent is that lg is a standalone CTA, not an inner control): update CLAUDE.md to document the exception explicitly:

| `rounded-compact` | 4 px | **Inner controls** — buttons (sm/md), inputs, textareas, inline badges, code blocks nested inside a card |
| `rounded-card`    | 8 px | **Outer cards** — … also `Button` size `lg` (standalone CTA, outside a card nesting context) |

Option B (simpler, fully consistent): change lg to rounded-compact like sm and md.

Either is fine — the important thing is that the convention doc and the code agree.

Everything else is clean. Once the doc/code is aligned on the lg exception, this is ready to merge.

## Review CI ✅ green. The overall approach is correct — outer containers get `rounded-card`, inner controls get `rounded-compact`, decorative/nav items keep `rounded-default`, no more `rounded-[var(...)]` arbitraries. `apps/web/CLAUDE.md` is well-structured. One issue before this can merge: --- ### `button.tsx` `lg` size uses `rounded-card`, but the convention doc says buttons use `rounded-compact` **File:** `apps/web/src/components/button.tsx` ```ts lg: "h-11 px-5 text-[var(--ch-font-size-body-lg)] rounded-card", ``` `apps/web/CLAUDE.md` states: > `rounded-compact` | 4 px | **Inner controls** — buttons, inputs, textareas, inline badges, code blocks nested inside a card No exception is carved out for larger button sizes. The `sm` and `md` sizes correctly use `rounded-compact`, but `lg` silently diverges to `rounded-card`. This is the exact kind of undocumented exception that erodes a freshly-established convention — the next developer who reads the doc and adds a large button will use `rounded-compact` and visually mismatch the existing `lg` buttons, or vice versa. **Fix — pick one:** **Option A** (preferred if the design intent is that `lg` is a standalone CTA, not an inner control): update `CLAUDE.md` to document the exception explicitly: ```md | `rounded-compact` | 4 px | **Inner controls** — buttons (sm/md), inputs, textareas, inline badges, code blocks nested inside a card | | `rounded-card` | 8 px | **Outer cards** — … also `Button` size `lg` (standalone CTA, outside a card nesting context) | ``` **Option B** (simpler, fully consistent): change `lg` to `rounded-compact` like `sm` and `md`. Either is fine — the important thing is that the convention doc and the code agree. --- Everything else is clean. Once the doc/code is aligned on the `lg` exception, this is ready to merge.
apps/web/src/components/button.tsx
@ -22,3 +22,1 @@
sm: "h-8 px-3 text-[var(--ch-font-size-small)] rounded-[var(--ch-radius-default)]",
md: "h-10 px-4 text-[var(--ch-font-size-body)] rounded-[var(--ch-radius-default)]",
lg: "h-11 px-5 text-[var(--ch-font-size-body-lg)] rounded-[var(--ch-radius-card)]",
sm: "h-8 px-3 text-[var(--ch-font-size-small)] rounded-compact",
reviewer commented 2026-04-21 11:59:24 +00:00
Collaborator
Copy link

The lg size uses rounded-card (8 px), but apps/web/CLAUDE.md defines rounded-compact as the tier for all buttons with no size exception. This silently contradicts the convention this PR is establishing.

Either:

  • Update CLAUDE.md to explicitly note lg buttons use rounded-card (e.g. "standalone CTA" carve-out), or
  • Change rounded-card here to rounded-compact to be consistent with sm/md.
The `lg` size uses `rounded-card` (8 px), but `apps/web/CLAUDE.md` defines `rounded-compact` as the tier for all buttons with no size exception. This silently contradicts the convention this PR is establishing. Either: - Update `CLAUDE.md` to explicitly note `lg` buttons use `rounded-card` (e.g. "standalone CTA" carve-out), or - Change `rounded-card` here to `rounded-compact` to be consistent with `sm`/`md`.
fix(web): align button lg size with rounded-compact convention
All checks were successful
qa / qa (pull_request) Successful in 3m49s
Details
qa / dockerfile (pull_request) Successful in 10s
Details
0c27e3ee9a 
All button sizes now consistently use rounded-compact per the
border-radius hierarchy documented in apps/web/CLAUDE.md. The
earlier rounded-card on lg was an undocumented divergence.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
dev commented 2026-04-21 12:00:19 +00:00
Author
Collaborator
Copy link

Fixed in 0c27e3e — changed lg from rounded-card to rounded-compact. Option B: all three button sizes now uniformly use rounded-compact, fully consistent with the convention doc. No carve-out needed.

Fixed in 0c27e3e — changed `lg` from `rounded-card` to `rounded-compact`. Option B: all three button sizes now uniformly use `rounded-compact`, fully consistent with the convention doc. No carve-out needed.
dev requested review from reviewer 2026-04-21 12:04:33 +00:00
reviewer approved these changes 2026-04-21 12:05:12 +00:00
reviewer left a comment
Copy link

Round 2 — APPROVED

CI ✅ green (run #1862, success).

My round-1 finding is fully addressed: button.tsx lg size now uses rounded-compact (commit "fix(web): align button lg size with rounded-compact convention"), consistent with the apps/web/CLAUDE.md convention table. Code and doc agree across all three button sizes (sm / md / lg → rounded-compact).

No new issues. Ready to merge.

## Round 2 — APPROVED CI ✅ green (run #1862, `success`). My round-1 finding is fully addressed: `button.tsx` `lg` size now uses `rounded-compact` (commit "fix(web): align button lg size with rounded-compact convention"), consistent with the `apps/web/CLAUDE.md` convention table. Code and doc agree across all three button sizes (`sm` / `md` / `lg` → `rounded-compact`). No new issues. Ready to merge.
code-lead deleted branch dev/210 2026-04-21 12:12:02 +00:00
Sign in to join this conversation.
Reviewers
No reviewers
reviewer
Labels
Clear labels   
area:agents
Agent types, pool scheduling, per-instance config

  
area:dashboard
Dashboard UI and observability surfaces

  
area:database
DB layer — schema, migrations, ORM, raw SQL

  
area:design
UI/UX mockup work — routes to designer agent

  
area:design-review
Design review dispatch — routes to design-reviewer agent

  
area:flows
Flow runner — YAML loader, executor, op registry, expression eval

  
area:infra
Deployment, isolation, containers, systemd units

  
area:meta
Tracking, scaffolding, project setup

  
area:security
Security — routes to reviewer-security (opus)

  
area:sessions
Session-id store, Claude SDK resume logic

  
area:webhook
Forgejo webhook routing and handlers

  
area:workdir
Clone cache, worktrees, git identity

  
security
Security-sensitive issue

  
type:bug
Bug

  
type:chore
Chore

  
type:meta
Tracking or decisions, not implementation work

  
type:user-story
User story

No labels
area:agents
area:dashboard
area:database
area:design
area:design-review
area:flows
area:infra
area:meta
area:security
area:sessions
area:webhook
area:workdir
security
type:bug
type:chore
type:meta
type:user-story
Milestone
Clear milestone
No items
No milestone
Projects
Clear projects
No items
No project
Assignees
Clear assignees
No assignees
2 participants
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
charles/claude-hooks!220
No description provided.