microsoft/vscode
1
0
Fork 0
mirror of https://github.com/microsoft/vscode.git synced 2026-07-11 14:04:49 -05:00
Code Issues Packages Projects Releases 177 Wiki Activity

Merge pull request #324197 from microsoft/mrleemurray/casual-coral-marlin

Browse Source 
Style overrides: Adjust title bar height and padding for better alignment
This commit is contained in:
Lee Murray
2026-07-03 14:37:17 +01:00
committed by GitHub
parent 27dba7c716 e7d36d1d76
commit c648fff081
4 changed files with 38 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/vs/workbench/browser/media/floatingPanels.css
View File

@@ -156,10 +156,6 @@
padding-bottom: var(--vscode-spacing-size40);
}
.monaco-workbench.floating-panels .activitybar > .content > .composite-bar {
margin-top: var(--vscode-spacing-size20);
}
/*
* When the status bar is hidden every floating card sits directly against the window
* bottom edge. Double the bottom margin (4px → 8px) to match the doubled outer gutter

12
src/vs/workbench/browser/part.ts
View File

@@ -217,6 +217,8 @@ class PartLayout {
private static readonly HEADER_HEIGHT = 35;
private static readonly TITLE_HEIGHT = 35;
// KEEP IN SYNC WITH: styleOverrides/browser/media/padding.css `.style-override .part > .title { height: 32px }`
private static readonly TITLE_HEIGHT_STYLE_OVERRIDE = 32;
private static readonly Footer_HEIGHT = 35;
private headerVisible: boolean = false;
@@ -226,10 +228,16 @@ class PartLayout {
layout(width: number, height: number): ILayoutContentResult {
// Title Size: Width (Fill), Height (Variable)
// Title Size: Width (Fill), Height (Variable).
// When the Modern UI style-override is active the title bar is 32 px
// (set in padding.css). Mirror that value here so the content area
// calculation stays in sync. Uses the same `.closest('.style-override')`
// check as EditorTabsControl.tabHeight.
let titleSize: Dimension;
if (this.options.hasTitle) {
titleSize = new Dimension(width, Math.min(height, PartLayout.TITLE_HEIGHT));
const isStyleOverride = !!this.contentArea?.closest('.style-override');
const titleHeight = isStyleOverride ? PartLayout.TITLE_HEIGHT_STYLE_OVERRIDE : PartLayout.TITLE_HEIGHT;
titleSize = new Dimension(width, Math.min(height, titleHeight));
} else {
titleSize = Dimension.None;
}

7
src/vs/workbench/contrib/styleOverrides/browser/media/activityBar.css
View File

@@ -262,7 +262,6 @@
box-sizing: border-box;
height: 24px;
line-height: 24px;
margin-bottom: 4px;
}
.style-override.monaco-workbench .pane-composite-part > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .action-label::before,
@@ -285,7 +284,6 @@
height: 24px;
padding: 0;
width: 24px;
margin-bottom: 4px;
}
.style-override.monaco-workbench .part.auxiliarybar > .header-or-footer > .composite-bar-container > .composite-bar > .monaco-action-bar .action-item.icon .active-item-indicator,
@@ -303,8 +301,3 @@
.style-override.monaco-workbench .pane-composite-part.basepanel > .title > .composite-bar-container > .composite-bar > .monaco-action-bar .actions-container {
gap: 4px;
}
.style-override.monaco-workbench .pane-composite-part > .title.has-composite-bar > .title-actions .monaco-action-bar .action-item,
.style-override.monaco-workbench .pane-composite-part > .title.has-composite-bar > .global-actions .monaco-action-bar .action-item {
margin-bottom: 4px;
}

30
src/vs/workbench/contrib/styleOverrides/browser/media/padding.css
View File

@@ -45,16 +45,31 @@
width: auto;
}
/* Tighten the part title bar gutters: flush-left, small right inset. */
/* Tighten the part title bar gutters: flush-left, small right inset. Reduce height from 35px to 32px.
* KEEP IN SYNC WITH: part.ts PartLayout.TITLE_HEIGHT_STYLE_OVERRIDE */
.style-override.monaco-workbench .part > .title {
height: 32px;
padding-left: var(--vscode-spacing-size40, 4px);
padding-right: var(--vscode-spacing-size40, 4px);
}
.style-override.monaco-workbench .part > .title > .title-label {
line-height: 32px;
}
.style-override.monaco-workbench .part > .title > .title-actions {
height: 32px;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions {
padding: 0 4px;
}
.style-override.monaco-workbench .part.editor > .content .editor-group-container > .title .editor-actions .actions-container > li:last-child,
.style-override.monaco-workbench .part > .title .title-actions .actions-container > li:last-child {
margin-right: 0;
}
/* Inset the part title label (e.g. "Explorer") to align with the content below. */
.style-override.monaco-workbench .part > .title > .title-label {
padding-left: var(--vscode-spacing-size80, 8px);
@@ -68,6 +83,16 @@
.agent-session-item .agent-session-title-toolbar .actions-container {
gap: 4px;
}
&.chat-view-location-auxiliarybar {
.chat-view-title-inner {
padding: var(--vscode-spacing-size40, 4px);
}
}
&.chat-view-location-sidebar, &.chat-view-location-panel {
.chat-view-title-inner {
padding: 0 var(--vscode-spacing-size40, 4px) 0 var(--vscode-spacing-size80, 8px);
}
}
}
.style-override.monaco-workbench .monaco-pane-view .pane > .pane-header > .actions {
@@ -92,5 +117,6 @@
.style-override.monaco-workbench .part.basepanel.top .composite.title,
.style-override.monaco-workbench .part.basepanel.left .composite.title,
.style-override.monaco-workbench .part.basepanel.right .composite.title {
padding-right: 0;
padding-right: 2px;
}