Multirow Tabs for VSCode

Question

I commonly have 10+ tabs open per editor window which makes it tedious to scroll back and forth (or use ctrl+tab) to find the file I want.

Is there any way to have the tabs wrap?

Similar to Atom's multirow-tabs.

Update: Looks like it is a work in progress.

Answer 1

UPDATED 28 March 2020 for VSCode v1.43.2

• Fixed CSS for tab-close button
• Added CSS for smaller bread-crumbs and acion-bar (at the right of tab-bar)

I do the following for multirow tabs in visual-studio-code (until there is official support or an easier solution):

STEP 1: Install the extension VSCode Custom CSS. (Check out the extension page for proper installation instruction. It's a bit of a hack as VSCode does not officially support altering internal CSS.)

STEP 2: Create a CSS file (say, "/home/user/vscode/custom.css") and add the following contents:

/* Following CSS to wrap the tab-bar into multiple rows: */

.tabs-and-actions-container > .monaco-scrollable-element {
  height: auto !important;
}

.tabs-and-actions-container > .monaco-scrollable-element > .tabs-container {
  height: auto !important;
  flex-wrap: wrap;
}


/* Following CSS to make the tabs thinner/smaller (so that they take lesser vertical space): */

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab {
	height: 25px;
	padding-left: 4px;
	font-size: 0.8em;  /* smaller font-size for tab icons and label */
}

.monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab .label-name {
	font-size: inherit !important;  /* inherit updated font-size for label */
}


/* Following CSS for smaller close button on tabs: */

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close {
	width: 20px;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {
	height: 12px;
	width: 12px;
	background-size: 12px;
}

.monaco-workbench .part.editor>.content .editor-group-container.active>.title .tabs-container>.tab>.tab-close .action-label.codicon {
	font-size: 12px;
}


/* OPTIONAL: Following CSS for smaller breadcrumbs (below tab-bar) */

.monaco-breadcrumbs {
	font-size:0.65em;
	opacity: 0.8;
	height:18px !important;
}
.tabs-breadcrumbs .breadcrumbs-control {
	height: 18px !important;
}
.monaco-workbench .symbol-icon.block {
	height: 8px;
	width: 8px;
	min-height: 8px;
	min-width: 14px;
	background-position: 50%;
	background-size: contain;
}
.breadcrumbs-control .monaco-breadcrumb-item:before {
	min-width: 12px !important;
	height: 12px !important;
	background-size: contain !important;
}


/* OPTIONAL: Following CSS for smaller action-bar (beside the tab-bar) with menu, split, etc. */

.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions {
	height: 20px;
	padding:0;
}
.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions .action-label, .monaco-workbench .part.editor>.content .editor-group-container>.title .title-actions .action-label {
	height: 20px;
	line-height: 20px;
	min-width: 14px;
	background-size: 8px;
}

.tabs-and-actions-container > .editor-actions > .monaco-toolbar > .monaco-action-bar > .actions-container {
	max-width:60px;
	flex-wrap:wrap;
}

STEP 3: Point the extension to your custom CSS. Open the VSCode settings.json [Ctrl+Shift+P > "Open Settings(JSON)"] and add the following lines (with your path to custom.css file):

"vscode_custom_css.imports": [
    "file:///home/user/vscode/custom.css"
],
"vscode_custom_css.policy": true

STEP 4: Make sure you have gone through the VSCode Custom CSS extension's readme and enabled it properly. You may have to reload VSCode. Also, edit the CSS as per your preferences!

CREDIT: This solution (link to extension and the CSS to wrap tab-bar into multi-lines) was originally posted by Steven Laidlaw in this Github thread. I just extended the CSS for smaller tabs.