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

[stevenlaidlaw]

@manustays you can toggle the chrome dev tools via the action menu (ctrl+shift+P)

[akiraah]

After applying the custom.css I got an error stating "Your Code installation appears to be corrupt. Please reinstall".

Has anyone experienced something similar ?

[stevenlaidlaw]

@akira90 As detailed in the plugin (https://github.com/be5invis/vscode-custom-css):

If Code complains about that it is corrupted, simply click “Don't show again”

[akiraah]

@stevenlaidlaw

It keeps appearing again and again, after closing it appears again after 30 seconds. Then cmd + q is disabled as you can't close vscode because of the shortcut cannot be found, checked keymaps - it's still there.

This issue appeared after I've installed the Custom CSS and JS extension, I had to completely reinstall vscode.

[lattice0]

I just won't try this because it requires running VSCode as sudo and I don't like this idea

Please Microsoft, provide this by default

[Manachi]

I'm amazed and disappointed this option isn't available by default in Visual Studio Code. It exists in every other IDE or text editor in the market. Please prioritise this feature Microsoft.

Is there at least an extension that does this in the meantime anyone could point me to?

[richardnnn]

+1 Surprised this is not yet supported as of 2019

[kenjione]

I'm amazed and disappointed this option isn't available by default in Visual Studio Code. It exists in every other IDE or text editor in the market. Please prioritise this feature Microsoft.

Is there at least an extension that does this in the meantime anyone could point me to?

@Manachi,

If you look up you can find @stevenlaidlaw's post how he has solved the issue. You need to install vscode-custom-css extension and copy the stylesheet which you can find in his (or @manustays's) comment.

[rmolinamir]

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

It would be amazing for vscode to achieve this, was about to open an issue until I found this :)

Has there been any announcements regarding this feature?

[sebaranowski]

I just won't try this because it requires running VSCode as sudo and I don't like this idea

Agree. A new settings field for an additional css file or raw styles string for overwrites would help too. Atom has this too and I love it - this makes the DevTools inside vscode so much more useful..

[josineiaraujo]

This is an option I wish I could use!

[rajnisheu]

Its unbelievable there is no mutli line tab support. The Open Editors list is so irritating to the eye jumping up and done when files are opened and closed.

+1 for the issue

[dhex]

This is not just nice-to-have. It is a must. Waiting.. for official news ...

[hoodist]

Multi-line-tabs is very useful feature for editors. 'Open Editors Block' is good idea but it's not enough for us.

I hope that Microsoft adding to this feature.

[nausicaasnow]

Definitely a must have feature.

[iki]

EDIT: Updated for latest VS Code.

I combined @stevenlaidlaw and @manustays styles above, but wasn't able to avoid hiding the upper row of tabs under top app bar when working in VS Code for longer time (reload always helped). So, instead of allowing tabs to wrap, I'm letting them to shrink on single line:

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab {
  padding-left: 1px;
  flex-shrink: 1;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab.sizing-fit .monaco-icon-label {
  width: 2em;
  overflow: visible;
  text-overflow: clip;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab.sizing-fit .monaco-icon-label > .monaco-icon-label-description-container {
  width: 2em;
  overflow: visible;
  text-overflow: clip;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab .sizing-fit .monaco-icon-label:before {
  padding: 0;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab > .tab-close {
  width: 12px;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab > .tab-close .action-item {
  height: 35px;
}

.monaco-workbench .part.editor > .content .editor-group-container > .title.tabs > .tabs-and-actions-container > .monaco-scrollable-element > .tabs-container > .tab > .tab-close .action-label {
  height: 12px;
  width: 12px;
  background-size: 12px;
  margin-right: 1px
}

[pzuraq]

So I'm probably in a very small minority here, but I find horizontal tab bars to be very difficult to work with, especially when I have lots of code open in a large codebase and am jumping around a lot 😅

A couple of times now, I've hacked together a vertical tab bar to get around this, it works much better for me personally:

VSCode doesn't support this type of UI hacking at all (the solution is pretty terrible), and I imagine it would be a large lift to make it so extensions could add arbitrary panels and views like this, but it would also be really nice.

One of the things that is so great about a browser based editor is that it really is pretty hackable, and it mean we can experiment with new UIs and better DX in ways that would never have been possible in something like IntelliJ or Visual Studio directly. I know I've had lots of random ideas for utilities and widgets that would make life easier, would be cool to be able to play around more with the layout and such.

[Lady-Natalya]

Come on Microsoft, please add this feature or respond to us why y'all aren't going to add it.

Horizontal scrolling the tab bar is horrible. And the bar itself is by default hidden so I have to hover where I think it might be and await for it to appear. And it's so thin, I tried making it thicker so it would be easier to click on, but that didn't work either.

I just don't understand, do y'all want a bad UI for this product? Please help us.

[lattice0]

commenting again here: PLEASE, Microsoft, add this feature. It's a PAIN to do horizontal scrolling. Mouses weren't made for horizontal scrolling.

Enviado via ProtonMail móvel

-------- Mensagem Original -------- Ativo 15 de nov de 2019 17:23, Natalya escreveu:

Come on Microsoft, please add this feature or respond to us why y'all aren't going to add it.

Horizontal scrolling the tab bar is horrible. And the bar itself is by default hidden so I have to hover where I think it might be and await for it to appear. And it's so thin, I tried making it thicker so it would be easier to click on, but that didn't work either.

I just don't understand, do y'all want a bad UI for this product? Please help us.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[ciltocruz]

Netbeans has the option to create a bar for each project. VScode does not have "projects" but VScode does have Folders within the workspace ... It would be nice if a bar of open files could be created for each folder in the workspace.

[rafaelucena]

@Lady-Natalya Come on Microsoft, please add this feature or respond to us why y'all aren't going to add it.

@bpasero added the Backlog milestone in 23 of October for this feature.

That's already some progress, there is a plan to do it, now we wait. :)

[DLiblik]

Highly-condensed version of wrapping tabs using @stevenlaidlaw approach... some space lost to the right due to editor commands, but seeing the tabs all at once is worth it 😃

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

.tabs-and-actions-container>.monaco-scrollable-element>.tabs-container .label-description
 {
    margin-left: 0;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .monaco-icon-label:before {
    height: 35px;
}

.monaco-icon-label>.monaco-icon-label-container {
    flex-direction: column-reverse;
    display: flex;
}

.monaco-icon-label:before {
    background-size: 20px;
    width: 20px;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab {
    width: 80px;
    min-width: fit-content;
    min-width: -moz-fit-content;
    flex-shrink: 0;
}

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

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {
    margin-right: 0;
}

[mmzoo]

For me it would already suffice if the tab bar area would be wider than 50% of the window, i.e. stretch all the way to the right (like in TextMate).

I could not find an issue for this feature. But this issue here comes closest.

EDIT

I found an issue for that here https://github.com/microsoft/vscode/issues/84010

[fraigo]

This is what I've done after a couple of tweaks. I noticed when changing the theme, you need to "Reload Custom CSS and JS" again.

.monaco-workbench .part.editor>.content .editor-group-container>.title.tabs>.tabs-and-actions-container>.monaco-scrollable-element {
    height: initial !important;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container{
    height: initial !important;
    flex-wrap: wrap;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab{
    height: 30px;
    flex-grow: 1;
    border-bottom: 1px solid rgba(128,128,128,0.5);
}

[J3m5]

Still not planned for April, seriously, come on... I'm so tired of scrolling and looking for my tabs...

[arnotes]

yes please :)

[dgwyer]

Surprised this wasn't available already as VS Code is so flexible. Fingers crossed it can be added soon. I always have too many tabs to fit on one line and scrolling to find tabs is a real pain!

[lattice0]

It's almost as if vscode developers never used vscode for actual development

-------- Mensagem Original -------- Ativo 16 de abr de 2020 15:49, David Gwyer escreveu:

Surprised this wasn't available already as VS Code is so flexible. Fingers crossed it can be added soon. I always have too many tabs to fit on one line and scrolling to find tabs is a real pain!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub, or unsubscribe.

[ghost]

Started using VS code because a React course suggested it. One of the first things I tried to enable was tabs on multiple rows - but the option is missing, which is a real bummer. The actual Visual Studio has it and I use it all the time. VS code needs this ASAP!

[dgwyer]

Interesting that Visual Studio already has this.

Started using VS code because a React course suggested it. One of the first things I tried to enable was tabs on multiple rows - but the option is missing, which is a real bummer. The actual Visual Studio has it and I use it all the time. VS code needs this ASAP!

[amitistyping]

Oh come on Microsoft, do it already. This has been in Visual Studio for ages.

[im-richard]

I'm going to have to start adding an additional 500 calories to my diet just because my finger is having to fight with the constant scrolling so much.

It may seem like a small feature to them, but it has actually caused me to contemplate moving editors. The only reason I haven't is because I have VSCode setup exactly how I want it, and screwing with a new one right now is just going to lag my workflow / performance for a bit.

I can't imagine such a feature would take much work, and it would make a lot of people happy.

[J3m5]

Get ready for the next iteration plan! 💪 ✊

[J3m5]

It's here, pinned tabs are planned but still no multi line tabs... 😢

[im-richard]

Not shocked anymore. I've come to the conclusion that these guys don't use their own software. There's no way that a developer who uses this on an every-day basis AND has pull with deciding what VSCode has; could not be irritated at constantly scrolling.

[bedge]

Re:

Highly-condensed version of wrapping tabs using @stevenlaidlaw approach... some space lost to the right due to editor commands, but seeing the tabs all at once is worth it 😃

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

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

.tabs-and-actions-container>.monaco-scrollable->.tabs-container .label-description
 {
    margin-left: 0;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab .monaco-icon-label:before {
    height: 35px;
}

.monaco-icon-label>.monaco-icon-label-container {
    flex-direction: column-reverse;
    display: flex;
}

.monaco-icon-label:before {
    background-size: 20px;
    width: 20px;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab {
    width: 80px;
    min-width: fit-content;
    min-width: -moz-fit-content;
    flex-shrink: 0;
}

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

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab>.tab-close .action-label {
    margin-right: 0;
}

@DLiblik I like the idea, but there's too much padding around each filename, any suggestion for compressing a bit? Also, the wrapping is non-optimal:

I know it's the toolbar that's causing the wrapping issue, and I've been using this as a console cmd to remove it:

[...document.querySelectorAll('.editor-actions')].map(a => a.style.display = 'none')

But if we're wrapping, it would be preferable to keep the toolbar and extend to the full width below it.

[DLiblik]

I like the idea, but there's too much padding around each filename, any suggestion for compressing a bit?

Unfortunately @bedge the DOM structure/classes for the info in the tabs has changed since I did that - the folder name showed at the top when I did that up.

I was going to try and keep up with VS Code changes, but then the customizations had VSCode warning about non-standard code (at least at last check) which caused other issues, so I just gave up and went back to the out-of-box single row line-up. When I'm up to my ankles upside-down in concurrent edits then I just use a different editor for now.

And no complaints, VS Code is, after all, free and it's a great tool, but it's definitely sucking a little wind on this item right now. I'd jump in and PR it myself but I'm heavily into some other community undertakings atm.

[amitistyping]

It's here, pinned tabs are planned but still no multi line tabs... 😢

This is just sad.

[jay4110]

C'mon Microsoft you can do it. JUST DO IT