Only apply bottom border to inactive tabs

microsoft · Sep 16, 2020 · e55c965 · e55c965
1 parent f0fed35
commit e55c965
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css b/src/vs/workbench/browser/parts/editor/media/tabstitlecontrol.css
@@ -41,7 +41,7 @@
 	flex-wrap: wrap;
 }
 
-.monaco-workbench .part.editor>.content .editor-group-container>.title.tabs >.tabs-and-actions-container.multi-line > .monaco-scrollable-element > .tabs-container::after {
+.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container.multi-line > .monaco-scrollable-element > .tabs-container::after {
 	content: ""; /* Add a hidden space after the last tab in multi-line tabs */
 	flex: 1 0 auto;
 }

diff --git a/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts b/src/vs/workbench/browser/parts/editor/tabsTitleControl.ts
@@ -126,7 +126,7 @@ export class TabsTitleControl extends TitleControl {
 		//  on: multiple rows with flex side-by-side
 		this.tabsAndActionsContainer = document.createElement('div');
 		this.tabsAndActionsContainer.classList.add('tabs-and-actions-container');
-    this.tabsAndActionsContainer.classList.toggle('multi-line', this.accessor.partOptions.multiLineTabs);
+		this.tabsAndActionsContainer.classList.toggle('multi-line', this.accessor.partOptions.multiLineTabs);
 		this.titleContainer.appendChild(this.tabsAndActionsContainer);
 
 		// Tabs Container
@@ -540,7 +540,7 @@ export class TabsTitleControl extends TitleControl {
 	private updateMultiLineTabs(): void {
 		const tabsAndActionsContainer = assertIsDefined(this.tabsAndActionsContainer);
 
-		this.tabsAndActionsContainer.classList.toggle('multi-line', this.accessor.partOptions.multiLineTabs);
+		tabsAndActionsContainer.classList.toggle('multi-line', this.accessor.partOptions.multiLineTabs);
 	}
 
 	updateStyles(): void {
@@ -1051,7 +1051,6 @@ export class TabsTitleControl extends TitleControl {
 		// Borders / Outline
 		const borderRightColor = ((isTabLastSticky ? this.getColor(TAB_LAST_PINNED_BORDER) : undefined) || this.getColor(TAB_BORDER) || this.getColor(contrastBorder));
 		tabContainer.style.borderRight = borderRightColor ? `1px solid ${borderRightColor}` : '';
-		tabContainer.style.borderBottom = borderRightColor && this.accessor.partOptions.multiLineTabs ? `1px solid ${borderRightColor}` : ''; // bottom border when wrapping multi-line
 		tabContainer.style.outlineColor = this.getColor(activeContrastBorder) || '';
 
 		// Settings
@@ -1190,6 +1189,10 @@ export class TabsTitleControl extends TitleControl {
 			tabContainer.style.backgroundColor = this.getColor(isGroupActive ? TAB_INACTIVE_BACKGROUND : TAB_UNFOCUSED_INACTIVE_BACKGROUND) || '';
 			tabContainer.style.boxShadow = '';
 
+			// bottom border when wrapping multi-line
+			const borderBottom = this.getColor(TAB_BORDER) || this.getColor(contrastBorder);
+			tabContainer.style.borderBottom = borderBottom && this.accessor.partOptions.multiLineTabs ? `1px solid ${borderBottom}` : '';
+
 			// Label
 			tabContainer.style.color = this.getColor(isGroupActive ? TAB_INACTIVE_FOREGROUND : TAB_UNFOCUSED_INACTIVE_FOREGROUND) || '';
 		}