Allow tabs to wrap to multi-line

[illz]

I almost always have more tabs open than fit in the horizontal space provided. I have seen the thread on shrinking tabs to try to fit them in one line #15048, and I've also seen this closed feature request for what I'm asking for - #32836. That issue was closed saying there would be no changes for 6-12 months, and it has been around 15 months now so wanted to reopen discussion.

JetBrains IDEs added this a few years ago - simple config option to wrap open tabs to multiple lines rather than extending indefinitely horizontally, forcing a horizontal scroll or use of the Open Editors section in the left bar. While the Open Editors block is a nice idea, I've spent so many years switching via tabs (and continue to do so in all my other editors) that I'm requesting a better solution.

[hugodichon]

For sure that is a really basic and essential functionality to have. Following up on that for a while now.

[joaohonorato]

Can this be done any time soon? I just love this feature, it awe me to not see it in vscode.

Up discussion!

[neil-119]

Would love to have this as well. We use VS Code mostly for Angular work and we typically have multiple components (TS, HTML, CSS) and services (TS) open at a time, and we like to group relevant tabs together at the top.

[helloli]

Although we can use 'Open Editors' or 'Ctrl + Tab' instead, many of us would appreciate it very much if multi-line tabs were supported. Please carefully consider it.

[akiraah]

Has there been any updates regarding this feature? How difficult would it be to create an extension that does this and publish it to the market place ?

[im-richard]

Seems like really simple functionality which is almost a must. I've debated utilizing other apps just for this feature alone because at any given time, I can have roughly 20-30 tabs open, and everything on a single row is just annoying at times.

Really hope this is looked at as it's literally the only pet-peeve I currently have with vscode.

[hugodichon]

Come on guys... At least provide some feedback to people expecting that feature one day.
If I had enough time I would have liked to investigate and submit a pull request, unfortunately I don't have that luxury.
I would like to add up that Microsoft main development product has that feature built-in since a bunch of years already, it's called Visual Studio.

[akiraah]

I've gave up with VSCODE - this feature should've been built in, even Eclipse has it. I'm using IntelliJ now as a lot of things come out of the box.

[lattice0]

PLEASE, THIS FEATURE IS EXTREMELY USEFUL

Look at my firefox: https://imgur.com/a/CKOGGMq

I can't live without miltiline tabs

It's VERY annoying to search for the opened tabs by scrolling. I'm almost giving up on vscode because of this.

[stevenlaidlaw]

I've implemented a stop-gap solution using VSCode Custom CSS. Just create your own custom CSS file in your system and fill it with the following:

.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;
}

Then just point the plugin at your custom file in your settings.json like so:

    "vscode_custom_css.imports": [
        "file:///home/username/path/to/dir/custom.css"
    ],
    "vscode_custom_css.policy": true,

Then hit ctrl-shift-p and run "Reload custom CSS and JS"

This has solved the problem for me until they implement an in-app solution.

[manustays]

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

@stevenlaidlaw, your solution worked for me, thanks! How do you figure out the classes used by vscode?

---

EDIT:

As suggested by @stevenlaidlaw below, VSCode has an option in action menu (Ctrl+Shift+P) to Toggle Developer Tools.

I ended up downloading the source code to find the classes for individual tabs and added the following CSS to make the tabs thinner (so that they take less vertical space):

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

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

/* below CSS for the close button on tab */

.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;
}