Skip to content

fix(web): align composer toolbar corners with card border-radius #1201

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
itzrnvr wants to merge 1 commit into
base: main
Choose a base branch
from
+8 −1
Draft

fix(web): align composer toolbar corners with card border-radius #1201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 4 additions & 1 deletion apps/kimi-web/src/components/chat/Composer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1386,7 +1386,10 @@ function selectModel(modelId: string): void {
padding: 6px 10px 4px;
background: color-mix(in srgb, var(--panel2), black 1.5%);
position: relative;
border-radius: 0 0 var(--r-md) var(--r-md);
/* Match the .composer-card's inner bottom corners. The card has a 1px
border, so the toolbar's radius must be 1px smaller than the card's
outer radius to avoid the toolbar's background bulging past the border. */
border-radius: 0 0 15px 15px;
}

.toolbar-left,
Expand Down
4 changes: 4 additions & 0 deletions apps/kimi-web/src/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -444,6 +444,10 @@ html[data-color-scheme="dark"][data-theme="modern"] {
}
:is(html[data-theme="modern"], html[data-theme="kimi"]) .toolbar {
background: color-mix(in srgb, var(--panel), black 1.5%);
/* Match the .composer-card's inner bottom corners. The card has a 1px
border, so the toolbar's radius must be 1px smaller than the card's
outer radius to avoid the toolbar's background bulging past the border. */
border-radius: 0 0 calc(var(--r-md) - 1px) calc(var(--r-md) - 1px);

@chatgpt-codex-connector chatgpt-codex-connector Bot Jun 29, 2026

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

P2 Badge Keep Kimi toolbar radius in sync with its 20px card

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 👍 / 👎.

}
:is(html[data-theme="modern"], html[data-theme="kimi"]) .attach-btn {
width: 26px;
Expand Down