fix(web): align composer toolbar corners with card border-radius#1201
fix(web): align composer toolbar corners with card border-radius#1201itzrnvr wants to merge 1 commit into
Conversation
|
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 9e4b713cda
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| :is(html[data-theme="modern"], html[data-theme="kimi"]) .toolbar { | ||
| background: color-mix(in srgb, var(--panel), black 1.5%); | ||
| /* Match .composer-card's var(--r-md) minus 1px border. */ | ||
| border-radius: 0 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px); |
There was a problem hiding this comment.
This shared Modern/Kimi override leaves the Kimi composer mismatched: the Kimi-specific rule later in this file sets .composer-card to 20px (line 880), but this selector still applies to html[data-theme="kimi"] and computes the toolbar corners from --r-md (root 12px), so Kimi renders an 11px toolbar inside a 20px card instead of the intended 19px inner curve. In the Kimi theme, the bottom toolbar corners will still visibly cut inside the card despite this fix.
Useful? React with 👍 / 👎.
The composer toolbar's bottom corners used var(--r-md) (12px) while the composer card uses 16px (terminal) or var(--r-md) (modern/kimi). This mismatch caused the toolbar corners to look cut off or overlapping inside the card's rounded shape. Fix: set the toolbar border-radius to match the card's inner curve (card radius minus 1px border) across all themes. - Terminal: toolbar 15px to match card's 16px - 1px border - Modern/Kimi: toolbar calc(var(--r-md) - 1px) to match card's var(--r-md)
itzrnvr
force-pushed
the
fix/composer-toolbar-corners
branch
from
9e4b713 to
f860839
Compare
1 participant
Problem
The composer toolbar's bottom corners (where the file picker, mode selector, and model dropdown live) don't match the composer card's border-radius, causing a visible mismatch where the toolbar corners look cut off or overlapping inside the card's rounded shape.
Fix
Set the toolbar's bottom corners to match the card's inner curve (card radius minus the 1px border):
var(--r-md)to15px(card's16px−1pxborder)border-radius: 0 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px)override instyle.cssScreenshots
Before — toolbar corners don't follow the card's curve:
After — toolbar corners align cleanly with the card:
Testing
vue-tsc --noEmit)vite build)Changes
apps/kimi-web/src/components/chat/Composer.vue— toolbar border-radiusvar(--r-md)→15pxapps/kimi-web/src/style.css— modern/kimi toolbar override adds matchingcalc(var(--r-md) - 1px)radius