Skip to content

fix(ui): render header controls with circular arcs at concentric radii - #33

Merged
fang2hou merged 1 commit into
mainfrom
fix/ui-header-control-arcs
Oct 14, 2026
Merged

fang2hou merged 1 commit into
mainfrom
fix/ui-header-control-arcs

Conversation

@fang2hou

Copy link
Copy Markdown
Owner

What

Follow-up to #32 from the Codex worktree. Header controls (mode toggle, language menu trigger) currently keep the global squircle corner shape; at a 14px outer radius a squircle arc is not the true offset curve of the round 9px inner pill, so the toggle loses strict concentricity.

This pins header controls to circular arcs instead:

  • corner-shape: round + 14px outer radius on header .squircle controls
  • mode toggle pill and buttons at 9px (14 − 1px border − 4px padding), replacing the 8px rounded-lg on the buttons
  • geometry reasserted on the pill span (inset-block: 4px, left: 4px, width: calc(50% - 4px))

Why

A circular outer arc at 14px is exactly concentric with a 9px inner arc — the pill reads as an even-width inset of the container at every point. The squircle shape exaggerated the gap at the diagonals.

CSS-only; no markup or behavior change.

@fang2hou
fang2hou merged commit c92b9d3 into main Oct 14, 2026
3 checks passed
@fang2hou
fang2hou deleted the fix/ui-header-control-arcs branch October 14, 2026 07:11
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant