Skip to content

Chat: make editor send button circular #329022

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

Open
Elijah King (eli-w-king) wants to merge 5 commits into
base: main
Choose a base branch
from
+11 −12
Open

Chat: make editor send button circular #329022

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
01f9814
chat: make editor send button circular
eli-w-king Aug 4, 2026
a24a7ba
chat: preserve send icon foreground
eli-w-king Aug 4, 2026
ec21b21
Merge branch 'main' into eli/agents/fix-editor-send-button-shape
eli-w-king Aug 4, 2026
8925cf0
chat: preserve send button hover state
eli-w-king Aug 4, 2026
8a2a8aa
chat: simplify send button interaction styles
eli-w-king Aug 4, 2026
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
23 changes: 11 additions & 12 deletions src/vs/workbench/contrib/chat/browser/widget/media/chat.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1291,12 +1291,12 @@ have to be updated for changes to the rules above, or to support more deeply nes
gap: var(--vscode-spacing-size40);
}

.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button {
.action-item.chat-submit-button {
position: relative;
border-radius: var(--vscode-cornerRadius-circle);
}

.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label {
.action-item.menu-entry.chat-submit-button > .action-label.codicon[class*='codicon-'] {
box-sizing: border-box;
width: 22px;
height: 22px;
Expand All @@ -1309,38 +1309,37 @@ have to be updated for changes to the rules above, or to support more deeply nes
}

/* Nudge icon position to ensure it looks optically aligned within the button */
.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label.codicon-arrow-up-compact::before {
.action-item.chat-submit-button > .action-label.codicon-arrow-up-compact::before {
display: inline-block;
transform: translateY(0.5px);
}

.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label.codicon-plus::before {
.action-item.chat-submit-button > .action-label.codicon-plus::before {
transform: translateX(0.5px);
}

/* Focus indicator drawn on the action-item wrapper so it sits cleanly around
the button surface with a small offset. */
.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button:not(.disabled):has(> .action-label:focus-visible) {
.action-item.chat-submit-button:not(.disabled):has(> .action-label:focus-visible) {
outline: 1px solid var(--vscode-focusBorder);
outline-offset: 1px;
border-radius: var(--vscode-cornerRadius-circle);
}

.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label:focus,
.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button > .action-label:focus-visible {
.action-item.chat-submit-button > .action-label:focus,
.action-item.chat-submit-button > .action-label:focus-visible {
outline: none;
}

/* Idle: solid primary button background. */
.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button:not(.disabled) > .action-label {
.monaco-workbench .action-item.menu-entry.chat-submit-button:not(.disabled) > .action-label.codicon[class*='codicon-'] {
background: var(--vscode-button-background);
color: var(--vscode-button-foreground) !important;
transition: background-color 120ms ease;
}

.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button:not(.disabled) > .action-label:hover,
.interactive-session .chat-input-toolbars > .chat-execute-toolbar .monaco-action-bar .action-item.chat-submit-button:not(.disabled) > .action-label:focus-visible {
background: var(--vscode-button-hoverBackground);
&:is(:hover, :focus-visible) {
background: var(--vscode-button-hoverBackground);
}
}

.interactive-input-part:has(.chat-editing-session > .chat-editing-session-container) .chat-input-container,
Expand Down
Loading