Refactor border-radius styles for consistency#320065
Merged
Merged
Conversation
- Updated various CSS files to replace hardcoded border-radius values with corresponding CSS variables for consistency and maintainability. - Adjusted border-radius for elements in openInVSCode.css, sidebarActionButton.css, style.css, auxiliaryBarPart.css, chatCompositeBar.css, panelPart.css, projectBarPart.css, mobile styles, agentFeedback styles, changes view styles, and more. - Ensured that all instances of border-radius now utilize the defined variables such as --vscode-cornerRadius-small, --vscode-cornerRadius-medium, --vscode-cornerRadius-large, etc. Co-authored-by: Copilot <copilot@github.com>
Co-authored-by: Copilot <copilot@github.com>
Contributor
📬 CODENOTIFYThe following users are being notified based on files changed in this PR: @benibenjMatched files:
|
Contributor
There was a problem hiding this comment.
Pull request overview
This pull request refactors Agents window (src/vs/sessions/**) styling to standardize border-radius usage via the platform corner-radius size tokens (e.g. --vscode-cornerRadius-small/medium/large/xLarge/circle) instead of mixed per-file pixel values.
Changes:
- Replaced various hardcoded
border-radiuspixel values with the corresponding--vscode-cornerRadius-*CSS variables across sessions UI components. - Updated border radii for multiple Agents window parts (titlebar, sidebar/panel/aux bar, project bar, chat UI, providers, and overlays) to improve consistency and themeability.
- Applied the same standardization to mobile-specific UI (bottom sheets, overlay views, phone layout widgets).
Reviewed changes
Copilot reviewed 34 out of 34 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/vs/sessions/contrib/tunnelHost/electron-browser/media/tunnelHost.css | Use corner-radius token for tunnel host toggle. |
| src/vs/sessions/contrib/sessions/browser/media/sessionsViewPane.css | Standardize corner radii for compact button and keybinding label. |
| src/vs/sessions/contrib/sessions/browser/media/sessionsTitleBarWidget.css | Standardize unread badge corner radius. |
| src/vs/sessions/contrib/sessions/browser/media/sessionsList.css | Standardize list row, card, and toolbar control corner radii. |
| src/vs/sessions/contrib/providers/remoteAgentHost/browser/media/hostPickerSheet.css | Standardize sheet handle corner radius token. |
| src/vs/sessions/contrib/providers/remoteAgentHost/browser/media/hostPickerDropdown.css | Standardize dropdown handle corner radius token. |
| src/vs/sessions/contrib/providers/remoteAgentHost/browser/media/hostFilter.css | Standardize filter chip and close button corner radii. |
| src/vs/sessions/contrib/policyBlocked/browser/media/sessionsPolicyBlocked.css | Standardize progress bar corner radii. |
| src/vs/sessions/contrib/chat/browser/media/runScriptAction.css | Standardize run-script UI and quick input modal corner radii. |
| src/vs/sessions/contrib/chat/browser/media/noAgentHostEmptyState.css | Standardize inline code pill corner radius. |
| src/vs/sessions/contrib/chat/browser/media/chatWidget.css | Standardize button-like control corner radii. |
| src/vs/sessions/contrib/chat/browser/media/chatInput.css | Standardize chat input container, toolbar buttons, and pills corner radii. |
| src/vs/sessions/contrib/changes/browser/media/checksWidget.css | Standardize checks widget container and row corner radii. |
| src/vs/sessions/contrib/changes/browser/media/changesViewActions.css | Standardize action item corner radius. |
| src/vs/sessions/contrib/changes/browser/media/changesView.css | Standardize action/button and list row corner radii (incl. mixed-corner cases). |
| src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorWidget.css | Standardize editor widget corner radii across sections and pills. |
| src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorOverlay.css | Standardize overlay widget and action corner radii. |
| src/vs/sessions/contrib/agentFeedback/browser/media/agentFeedbackEditorInput.css | Standardize input widget and input field corner radii. |
| src/vs/sessions/contrib/accountMenu/browser/media/accountTitleBarWidget.css | Standardize badge corner radius. |
| src/vs/sessions/browser/parts/mobile/mobileChatShell.css | Standardize phone layout corner radii (pills, input, buttons). |
| src/vs/sessions/browser/parts/mobile/media/mobileSortGroupSheet.css | Standardize sheet handle corner radius. |
| src/vs/sessions/browser/parts/mobile/media/mobileSessionFilterChips.css | Standardize chip corner radius. |
| src/vs/sessions/browser/parts/mobile/media/mobilePickerSheet.css | Standardize picker sheet handle, search, list item, and icon corner radii. |
| src/vs/sessions/browser/parts/mobile/contributions/media/mobileOverlayViews.css | Standardize overlay view control, pills, and FAB corner radii. |
| src/vs/sessions/browser/parts/mobile/contributions/media/mobileMultiDiffView.css | Standardize multi-diff action corner radius. |
| src/vs/sessions/browser/parts/media/titlebarpart.css | Standardize checked action corner radius. |
| src/vs/sessions/browser/parts/media/sidebarPart.css | Standardize checked sidebar toggle corner radius. |
| src/vs/sessions/browser/parts/media/projectBarPart.css | Standardize project bar focus ring, icons, badges, and indicator corner radii. |
| src/vs/sessions/browser/parts/media/panelPart.css | Standardize panel composite bar label and checked state corner radii. |
| src/vs/sessions/browser/parts/media/chatCompositeBar.css | Standardize chat composite bar controls corner radii. |
| src/vs/sessions/browser/parts/media/auxiliaryBarPart.css | Standardize auxiliary bar composite bar label and checked state corner radii. |
| src/vs/sessions/browser/media/style.css | Add default sessions action-bar corner radius + standardize various container radii. |
| src/vs/sessions/browser/media/sidebarActionButton.css | Standardize sidebar action button corner radius. |
| src/vs/sessions/browser/media/openInVSCode.css | Standardize titlebar “Open in VS Code” control corner radius. |
chrmarti
approved these changes
Jun 5, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
This pull request standardizes the way border radii are applied across various CSS files in the project. Instead of using hardcoded pixel values for
border-radius, the code now uses CSS variables (e.g.,--vscode-cornerRadius-small,--vscode-cornerRadius-large). This change improves consistency, makes it easier to update the design system, and enhances themeability across the UI.The most important changes are:
Core border-radius standardization:
border-radiuspixel values instyle.css,openInVSCode.css,sidebarActionButton.css, and other component styles with corresponding--vscode-cornerRadius-*CSS variables for consistent theming. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13]Component-specific updates:
Mobile and overlay view adjustments:
This refactor makes it much easier to adjust the application's corner styling in the future and ensures that changes propagate consistently throughout the UI.