From 47b8a7780a5af3701656f7e5932e90a0e00170ef Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Fri, 3 Jul 2026 12:01:39 +0100 Subject: [PATCH 1/7] style: Adjust title bar height and padding for better alignment in workbench Co-authored-by: Copilot --- .../browser/media/activityBar.css | 6 ++-- .../styleOverrides/browser/media/padding.css | 31 +++++++++++++++++-- 2 files changed, 31 insertions(+), 6 deletions(-) diff --git a/src/vs/workbench/contrib/styleOverrides/browser/media/activityBar.css b/src/vs/workbench/contrib/styleOverrides/browser/media/activityBar.css index 72cb2e0dfed..3cf36c0a00e 100644 --- a/src/vs/workbench/contrib/styleOverrides/browser/media/activityBar.css +++ b/src/vs/workbench/contrib/styleOverrides/browser/media/activityBar.css @@ -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, @@ -304,7 +302,7 @@ 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 > .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; -} +} */ diff --git a/src/vs/workbench/contrib/styleOverrides/browser/media/padding.css b/src/vs/workbench/contrib/styleOverrides/browser/media/padding.css index ee21b7b3594..9c55cfb0613 100644 --- a/src/vs/workbench/contrib/styleOverrides/browser/media/padding.css +++ b/src/vs/workbench/contrib/styleOverrides/browser/media/padding.css @@ -45,16 +45,30 @@ 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. */ .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); @@ -92,5 +106,18 @@ .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; +} + +.style-override.monaco-workbench .chat-viewpane { + &.chat-view-location-auxiliarybar { + .chat-view-title-inner { + padding: 4px; + } + } + &.chat-view-location-sidebar, &.chat-view-location-panel { + .chat-view-title-inner { + padding: 0 4px 0 8px; + } + } } From 5fc4fe208f0962d629e63268af03d496e5952c32 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Fri, 3 Jul 2026 12:09:55 +0100 Subject: [PATCH 2/7] fix: Update PartLayout to include titleArea for improved layout handling --- src/vs/workbench/browser/part.ts | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/vs/workbench/browser/part.ts b/src/vs/workbench/browser/part.ts index e7b9278318f..af970f24ee8 100644 --- a/src/vs/workbench/browser/part.ts +++ b/src/vs/workbench/browser/part.ts @@ -80,7 +80,7 @@ export abstract class Part extends Componen this.titleArea = this.createTitleArea(parent, options); this.contentArea = this.createContentArea(parent, options); - this.partLayout = new PartLayout(this.options, this.contentArea); + this.partLayout = new PartLayout(this.options, this.titleArea, this.contentArea); this.updateStyles(); } @@ -222,14 +222,15 @@ class PartLayout { private headerVisible: boolean = false; private footerVisible: boolean = false; - constructor(private options: IPartOptions, private contentArea: HTMLElement | undefined) { } + constructor(private options: IPartOptions, private titleArea: HTMLElement | undefined, private contentArea: HTMLElement | undefined) { } layout(width: number, height: number): ILayoutContentResult { // Title Size: Width (Fill), Height (Variable) let titleSize: Dimension; if (this.options.hasTitle) { - titleSize = new Dimension(width, Math.min(height, PartLayout.TITLE_HEIGHT)); + const titleHeight = this.titleArea?.offsetHeight ?? PartLayout.TITLE_HEIGHT; + titleSize = new Dimension(width, Math.min(height, titleHeight)); } else { titleSize = Dimension.None; } From a5dfea533e6219e34314cdab4de2ba4ba8ffa684 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Fri, 3 Jul 2026 12:11:54 +0100 Subject: [PATCH 3/7] style: Remove top margin from activity bar in floating panels for improved alignment --- src/vs/workbench/browser/media/floatingPanels.css | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/vs/workbench/browser/media/floatingPanels.css b/src/vs/workbench/browser/media/floatingPanels.css index d92b36a5869..e78443892f0 100644 --- a/src/vs/workbench/browser/media/floatingPanels.css +++ b/src/vs/workbench/browser/media/floatingPanels.css @@ -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 From 47a1b53cbea28ea16a6e8f9300958b3ce77662e5 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Fri, 3 Jul 2026 12:44:34 +0100 Subject: [PATCH 4/7] style: Remove commented-out margin styles for cleaner code --- .../contrib/styleOverrides/browser/media/activityBar.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/vs/workbench/contrib/styleOverrides/browser/media/activityBar.css b/src/vs/workbench/contrib/styleOverrides/browser/media/activityBar.css index 3cf36c0a00e..27ce0d6ad50 100644 --- a/src/vs/workbench/contrib/styleOverrides/browser/media/activityBar.css +++ b/src/vs/workbench/contrib/styleOverrides/browser/media/activityBar.css @@ -301,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; -} */ From b30def48c3729361c59346eec6770ca73b06d854 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Fri, 3 Jul 2026 13:01:31 +0100 Subject: [PATCH 5/7] fix: Add style override for title height in PartLayout to ensure consistent layout Co-authored-by: Copilot --- src/vs/workbench/browser/part.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/vs/workbench/browser/part.ts b/src/vs/workbench/browser/part.ts index af970f24ee8..4cbd30a6dd0 100644 --- a/src/vs/workbench/browser/part.ts +++ b/src/vs/workbench/browser/part.ts @@ -217,6 +217,7 @@ class PartLayout { private static readonly HEADER_HEIGHT = 35; private static readonly TITLE_HEIGHT = 35; + private static readonly TITLE_HEIGHT_STYLE_OVERRIDE = 32; private static readonly Footer_HEIGHT = 35; private headerVisible: boolean = false; @@ -226,10 +227,15 @@ 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) { - const titleHeight = this.titleArea?.offsetHeight ?? PartLayout.TITLE_HEIGHT; + const isStyleOverride = !!this.titleArea?.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; From 9960bb626b772bfe177239011b978bc3a52cb657 Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Fri, 3 Jul 2026 13:08:23 +0100 Subject: [PATCH 6/7] fix: Update PartLayout to remove titleArea dependency for improved layout handling Co-authored-by: Copilot --- src/vs/workbench/browser/part.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/vs/workbench/browser/part.ts b/src/vs/workbench/browser/part.ts index 4cbd30a6dd0..e5c1cbde079 100644 --- a/src/vs/workbench/browser/part.ts +++ b/src/vs/workbench/browser/part.ts @@ -80,7 +80,7 @@ export abstract class Part extends Componen this.titleArea = this.createTitleArea(parent, options); this.contentArea = this.createContentArea(parent, options); - this.partLayout = new PartLayout(this.options, this.titleArea, this.contentArea); + this.partLayout = new PartLayout(this.options, this.contentArea); this.updateStyles(); } @@ -223,7 +223,7 @@ class PartLayout { private headerVisible: boolean = false; private footerVisible: boolean = false; - constructor(private options: IPartOptions, private titleArea: HTMLElement | undefined, private contentArea: HTMLElement | undefined) { } + constructor(private options: IPartOptions, private contentArea: HTMLElement | undefined) { } layout(width: number, height: number): ILayoutContentResult { @@ -234,7 +234,7 @@ class PartLayout { // check as EditorTabsControl.tabHeight. let titleSize: Dimension; if (this.options.hasTitle) { - const isStyleOverride = !!this.titleArea?.closest('.style-override'); + 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 { From e7d36d1d76beaa035fad963e9831a575c139c93d Mon Sep 17 00:00:00 2001 From: mrleemurray Date: Fri, 3 Jul 2026 13:10:35 +0100 Subject: [PATCH 7/7] style: Update title height in PartLayout and sync comments in padding.css for consistency Co-authored-by: Copilot --- src/vs/workbench/browser/part.ts | 1 + .../styleOverrides/browser/media/padding.css | 25 +++++++++---------- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/src/vs/workbench/browser/part.ts b/src/vs/workbench/browser/part.ts index e5c1cbde079..0d2e7c4fcb9 100644 --- a/src/vs/workbench/browser/part.ts +++ b/src/vs/workbench/browser/part.ts @@ -217,6 +217,7 @@ 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; diff --git a/src/vs/workbench/contrib/styleOverrides/browser/media/padding.css b/src/vs/workbench/contrib/styleOverrides/browser/media/padding.css index 9c55cfb0613..1cd29609a15 100644 --- a/src/vs/workbench/contrib/styleOverrides/browser/media/padding.css +++ b/src/vs/workbench/contrib/styleOverrides/browser/media/padding.css @@ -45,7 +45,8 @@ width: auto; } -/* Tighten the part title bar gutters: flush-left, small right inset. Reduce height from 35px to 32px. */ +/* 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); @@ -82,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 { @@ -109,15 +120,3 @@ padding-right: 2px; } -.style-override.monaco-workbench .chat-viewpane { - &.chat-view-location-auxiliarybar { - .chat-view-title-inner { - padding: 4px; - } - } - &.chat-view-location-sidebar, &.chat-view-location-panel { - .chat-view-title-inner { - padding: 0 4px 0 8px; - } - } -}