Update codicon font sizes to use compact variable#317511
Draft
mrleemurray wants to merge 4 commits into
Draft
Conversation
… CSS files Co-authored-by: Copilot <copilot@github.com>
Contributor
📬 CODENOTIFYThe following users are being notified based on files changed in this PR: @kycutlerMatched files:
@jrualesMatched files:
@lszomoruMatched files:
|
Contributor
Screenshot ChangesBase: Changed (44)
|
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/Default/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithArtifacts/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithArtifacts/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithFileChanges/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithFileChanges/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithTodos/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithTodos/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithTodosAndFileChanges/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithTodosAndFileChanges/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithArtifactsAndFileChanges/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/WithArtifactsAndFileChanges/Light
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/Full/Dark
| Before | After |
|---|---|
 |
 |
chat/input/chatInput/Full/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenElicitationInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/GreenElicitationInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeElicitationInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/OrangeElicitationInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedElicitationInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/RedElicitationInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffWithDisclaimerInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffWithDisclaimerInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedInContext/Light
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedWithDisclaimerInContext/Dark
| Before | After |
|---|---|
 |
 |
chat/chatToolRiskBadge/BadgeOffUnsandboxedWithDisclaimerInContext/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/SimpleQA/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/SimpleQA/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/PendingToolApproval/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/PendingToolApproval/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/bugs/issue-309796-missing-backslash/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/bugs/issue-309796-missing-backslash/Light
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/MultiTurn/Dark
| Before | After |
|---|---|
 |
 |
chat/widget/chatWidget/MultiTurn/Light
| Before | After |
|---|---|
 |
 |
editor/inlineChatZoneWidget/InlineChatZoneWidget/Dark
| Before | After |
|---|---|
 |
 |
editor/inlineChatZoneWidget/InlineChatZoneWidget/Light
| Before | After |
|---|---|
 |
 |
blocks-ci screenshots changed
Replace the contents of test/componentFixtures/blocks-ci-screenshots.md with:
Updated blocks-ci-screenshots.md
<!-- auto-generated by CI — do not edit manually -->
#### editor/codeEditor/CodeEditor/Dark
#### editor/codeEditor/CodeEditor/Light
#### editor/inlineChatZoneWidget/InlineChatZoneWidget/Dark
#### editor/inlineChatZoneWidget/InlineChatZoneWidget/Light
#### editor/inlineChatZoneWidget/InlineChatZoneWidgetTerminated/Dark
#### editor/inlineChatZoneWidget/InlineChatZoneWidgetTerminated/Light
Patch
--- test/componentFixtures/blocks-ci-screenshots.md 2026-05-20 11:53:43.587532125 +0000
+++ /tmp/blocks-ci-updated.md 2026-05-20 11:58:06.568978242 +0000
@@ -7,10 +7,10 @@
#### editor/inlineChatZoneWidget/InlineChatZoneWidget/Dark
-
+
#### editor/inlineChatZoneWidget/InlineChatZoneWidget/Light
-
+
#### editor/inlineChatZoneWidget/InlineChatZoneWidgetTerminated/Dark
Contributor
There was a problem hiding this comment.
Pull request overview
This PR standardizes many UI codicon font-size declarations by replacing hard-coded pixel values with the theme size token --vscode-codiconFontSize-compact, aiming for more consistent icon sizing across workbench, editor, and sessions surfaces.
Changes:
- Replaced numerous fixed codicon
font-sizevalues withvar(--vscode-codiconFontSize-compact)across workbench/editor/sessions CSS. - Updated some icon sizing rules in sessions UI (including width/height alignment in a few places).
- Minor adjustments to a handful of remaining codicon sizes and related UI icon dimensions.
Reviewed changes
Copilot reviewed 44 out of 44 changed files in this pull request and generated 4 comments.
Show a summary per file
| File | Description |
|---|---|
| src/vs/workbench/contrib/welcomeOnboarding/browser/media/variationA.css | Use compact codicon size for keymap pill icons. |
| src/vs/workbench/contrib/testing/browser/media/testing.css | Use compact codicon size for testing status icon. |
| src/vs/workbench/contrib/scm/browser/media/scm.css | Use compact codicon size for SCM history/hover icons. |
| src/vs/workbench/contrib/notebook/browser/media/notebookOutline.css | Use compact codicon size for outline “bubble” decoration. |
| src/vs/workbench/contrib/notebook/browser/media/notebookCellStatusBar.css | Use compact codicon size for notebook cell status bar icons. |
| src/vs/workbench/contrib/notebook/browser/media/notebookCellInsertToolbar.css | Adjust notebook insert toolbar codicon font-size. |
| src/vs/workbench/contrib/notebook/browser/media/notebookCellChat.css | Use compact codicon size for notebook cell chat status icon. |
| src/vs/workbench/contrib/notebook/browser/media/notebook.css | Use compact codicon size for execution count icons. |
| src/vs/workbench/contrib/mergeEditor/browser/view/media/mergeEditor.css | Use compact codicon size in merge editor headers. |
| src/vs/workbench/contrib/inlineChat/browser/media/inlineChat.css | Use compact codicon size for inline chat status icons. |
| src/vs/workbench/contrib/extensions/browser/media/extensionEditor.css | Use compact codicon size for pre-release badge icon. |
| src/vs/workbench/contrib/extensions/browser/media/extension.css | Use compact codicon size for extension list badge icons. |
| src/vs/workbench/contrib/debug/browser/media/debugViewlet.css | Use compact codicon size for debug dropdown chevron. |
| src/vs/workbench/contrib/comments/browser/media/review.css | Use compact codicon size for comment range glyph. |
| src/vs/workbench/contrib/codeEditor/browser/outline/documentSymbolsTree.css | Use compact codicon size for outline “bubble” decoration. |
| src/vs/workbench/contrib/chat/browser/widget/media/chat.css | Use compact codicon size across multiple chat widget icons. |
| src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatThinkingContent.css | Use compact codicon size in thinking content header. |
| src/vs/workbench/contrib/chat/browser/widget/chatContentParts/media/chatConfirmationWidget.css | Use compact codicon size within confirmation widget controls. |
| src/vs/workbench/contrib/chat/browser/chatSessions/media/chatSessionPickerActionItem.css | Use compact codicon size for session picker icons. |
| src/vs/workbench/contrib/chat/browser/chatManagement/media/chatModelsWidget.css | Use compact codicon size for models widget token limit icons. |
| src/vs/workbench/contrib/chat/browser/aiCustomization/media/aiCustomizationManagement.css | Use compact codicon size for embedded detail scope icon. |
| src/vs/workbench/contrib/chat/browser/agentSessions/experiments/media/unifiedQuickAccess.css | Use compact codicon size for unified quick access icons. |
| src/vs/workbench/contrib/chat/browser/agentSessions/agentHost/media/agentHostChatInputPicker.css | Use compact codicon size for agent host picker icons. |
| src/vs/workbench/contrib/browserView/electron-browser/media/browser.css | Use compact codicon size in browser view UI (plus one icon size tweak). |
| src/vs/workbench/browser/parts/views/media/views.css | Use compact codicon size in welcome/custom view tree elements. |
| src/vs/workbench/browser/parts/views/media/paneviewlet.css | Use compact codicon size for pane header description icons. |
| src/vs/workbench/browser/parts/activitybar/media/activityaction.css | Use compact codicon size for activity bar badge codicon content. |
| src/vs/sessions/contrib/sessions/browser/media/sessionsTitleBarWidget.css | Use compact codicon size and align width/height to the token. |
| src/vs/sessions/contrib/sessions/browser/media/sessionsList.css | Partially migrate session list codicon sizing to compact token. |
| src/vs/sessions/contrib/providers/remoteAgentHost/browser/media/hostFilter.css | Use compact codicon size for host filter icons/chevrons. |
| src/vs/sessions/contrib/chat/browser/media/newChatInSession.css | Use compact codicon size for new chat session toolbar icons. |
| src/vs/sessions/contrib/chat/browser/media/chatWidget.css | Use compact codicon size for sessions chat widget action icons. |
| src/vs/sessions/contrib/chat/browser/media/chatInput.css | Use compact codicon size for sessions chat input toolbar icons. |
| src/vs/sessions/contrib/changes/browser/media/checksWidget.css | Remove a codicon font-size override in CI checks badge. |
| src/vs/sessions/contrib/changes/browser/media/changesView.css | Use compact codicon size for changes view header/indicators. |
| src/vs/sessions/contrib/aquarium/browser/media/aquarium.css | Adjust agents aquarium toggle icon/logo sizing. |
| src/vs/sessions/browser/parts/mobile/mobileChatShell.css | Use compact codicon size for phone-layout action label icons. |
| src/vs/platform/actionWidget/browser/actionWidget.css | Use compact codicon size in action widget list rows. |
| src/vs/platform/actions/browser/menuEntryActionViewItem.css | Use compact codicon size for menu entry dropdown label icons. |
| src/vs/editor/contrib/inlineCompletions/browser/view/inlineEdits/view.css | Use compact codicon size for inline edit alternative action label. |
| src/vs/editor/contrib/hover/browser/hover.css | Use compact codicon size for hover verbosity action icons. |
| src/vs/editor/contrib/colorPicker/browser/colorPicker.css | Remove explicit picked-color codicon font-size. |
| src/vs/editor/browser/widget/diffEditor/components/accessibleDiffViewer.css | Use compact codicon size for accessible diff spacer icon. |
| src/vs/base/browser/ui/dropdown/dropdown.css | Use compact codicon size for dropdown label icons. |
Comments suppressed due to low confidence (3)
src/vs/sessions/contrib/changes/browser/media/changesView.css:87
- In
.changes-files-header-toolbar .action-label > .codicon, the font-size is now the compact token (likely 12px) butwidth/heightare still hard-coded to 10px. That can clip the glyph or distort alignment. Consider sizingwidth/heightconsistently with the font-size token (or removing the fixed box sizing).
> .codicon {
font-size: var(--vscode-codiconFontSize-compact) !important;
padding-left: 4px;
width: 10px;
height: 10px;
}
src/vs/sessions/contrib/sessions/browser/media/sessionsList.css:113
session-icon > .codiconno longer sets a font-size. In the workbench, codicons default to 16px (.monaco-workbench .codicon[class*='codicon-']), which is a behavioral change from the previous 12px and may affect row layout/alignment. Consider setting an explicitfont-size(e.g.var(--vscode-codiconFontSize-compact)) here to keep the icon sizing intentional.
This issue also appears on line 479 of the same file.
.session-icon {
display: flex;
align-items: flex-start;
line-height: 17px;
> .codicon {
flex-shrink: 0;
height: 16px;
display: flex;
align-items: center;
justify-content: center;
}
src/vs/sessions/contrib/sessions/browser/media/sessionsList.css:485
- In phone layout,
.session-item .session-icon > .codiconnow lacks a font-size, so it will likely revert to the workbench default 16px (previously 14px). Since this section has fixed heights/line-heights for the mobile row, consider explicitly setting the codicon size here (e.g.var(--vscode-codiconFontSize-compact)or another appropriate token) to avoid unintended layout shifts.
.session-item .session-icon {
line-height: 20px;
> .codicon {
height: 20px;
}
}
auto-merge was automatically disabled
May 20, 2026 14:08
Pull request was converted to draft
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 font size of Codicon icons across the application by replacing hardcoded
font-sizevalues in various CSS files with the CSS variable--vscode-codiconFontSize-compact. This change improves maintainability and ensures consistent icon sizing throughout the UI. Additionally, a few redundant or conflicting font-size rules have been removed, and some icon container dimensions have been updated for consistency.Codicon font size standardization:
font-sizevalues for.codiconelements withvar(--vscode-codiconFontSize-compact)in multiple components, including dropdowns, editors, action widgets, color pickers, chat widgets, and activity bar badges. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23] [24] [25] [26]Icon size and dimension adjustments:
.agents-aquarium-toggle-logo,.sessionsTitleBarWidget .codicon) to align with the new standardized font size. [1] [2]Removal of redundant or conflicting rules:
font-sizerules for Codicon icons in several files, such as color picker, checks widget, chat input, and session list. [1] [2] [3] [4] [5]These changes collectively ensure that icon sizing is consistent and controlled via a single CSS variable, making future adjustments easier and improving UI consistency.