Allow for smaller or larger tab height size

[imoby]

Height of tabs and tab container currently is fixed. It would be nice to allow for the option to have a smaller height size of tab container by possibly having an option to set it in settings. Maybe even offer option for larger as well. One might also be able to have the option of disabling file icons to provide even more of a xsmall option. All this provides more real estate to editor instead.

Current:

Quick modified version of a solution. Line height still needs to be adjusted to be centered though.

• VSCode Version: Latest
• OS Version: Latest

[darthdeus]

Is there any easy way to make the tabs of smaller height? Feels like a huge waste of space the way its done currently.

[dpren]

In terminal-based editors, I love that tabs are usually just the height of a buffer line.

[darthdeus]

Exactly, there's no reason for them to be any higher than a single line. Sometimes it feels that designers who create "pretty" designs like tabs in VS Code never really understood the needs of programmers. I mean sure, it looks pretty at first sight, but then you realize you lose 3 centimeters of your possibly small laptop screen just to a useless menu and tabs.

Comparing this to VIM for example, I don't think I ever used tabs, in the sense that I do keep multiple buffers open (and splits possibly), but don't need to see their names at all times. Kinda unfortunate that the current norm is having 40 tabs open instead of having fast and easy buffer switching.

[ngortheone]

I would love to have this feature

[mikelnorth]

I have been searching and searching for this, sad that I cant edit the height/font size of the editor tabs. Only able to change "workbench.editor.tabSizing": "shrink", which makes it take less width.

Id love to be able to specify what font size or to specify at least a small normal and large. or something similar.

[stevenlordiam]

Any update on this feature? Is it on the roadmap yet?

[schrodog]

I really wish this feature to be launched in near future. The height of tab size waste precious space in editor

[jorgemmsilva]

+1, would really like for this customisation to be available

[schrodog]

For those wishing to use smaller tabs immediately can use custom CSS extension, but be careful when you make height of tab smaller, there will be empty space in the bottom, because the height of editor is calculated directly under assumption of tab height = 35px and make it inline CSS. :( You can work around by setting editor-container to be height: calc(100% - height_you_want );

[alexramsey92]

For issues where I span the entire stack of a web application, I can have at least 10-15 files open at any given time. Config, dao, html, front end js, back end js, models, etc. This level of customization would make it great for me to be able to easily manage a larger number of open files. Having a two layer tab with adjustable height would be awesome!

[ruelasv]

Tab titles seem unnecessarily tall (top and bottom padding). This is a BIG issue when working on laptops with no extra monitor as every pixel on the screen is precious real estate. Would LOVE to get some setting that adjusts this padding and make the tab smaller but still functional. As of now it feels like I am getting old and need to have HUGE titles lol.

[wgq2633]

I'm expecting this feature too. +1

[ramsayleung]

Any update on this feature? Is it on the roadmap yet?

[fega]

I also want this feature!

[fega]

For @samrayleung, @wgq2633 and anyone that need that feature, I just got the same effect adjusting the "editor.fontSize" to a bigger size and then zooming out!

(it will also decrease the sidebar font-size)

[brandonkal]

I would like to see something like this specifically for zooming in. Using VSCode for presentations is pretty easy by pressing cmd+ a few times. But the issue is that this also causes tabs and breadcrumbs to be too large. I'd like to have tabs visible at normal size for reference so I can cmd+number between "slides"

Alternatively, the option to not zoom in the tab bar with cmd+/- would work. Changing only editor font size is okay, but it also means the command pallet is also small for a presentation.

[inwardmovement]

Would be great to allow customization of editors tabbar's height indeed.

[carbonz0]

Looking forward to this feature!

[kanlukasz]

This can be very useful, especially if you are working on a small screen. I hope you will correct it.

[w3dg]

This will be very useful if implied in a later update..... those huge tabs are really annoying...

[bvm84]

I need this feature too. With such tabs i can't get nice and clean editing area.

[tr1s]

I would love this feature!

[tiagosiebler]

Lil workaround in the settings.json:

    "workbench.editor.tabSizing": "shrink",
    "editor.fontSize": "16",
    "window.zoomLevel": -2,

Zoom affects everything, including tab sizes. Font reverts the code-font-only part of the change.

[ghost]

Being visually impaired, I need to be able to zoom the workspace and use HDPI scaling across everything. These needlessly padded tabs take up way too much screen space, which is already at a premium. I would very much appreciate a way to modify this.

[bitagoras]

It's actually not about saving half a codeline, but when you have a small screen (in our company we have 16:9 screens) and you use dense line settings is looks kind of unaesthetic to have such unnecessary high tabs. I would appreciate having this configurable to make it smaller.

[sultaniman]

I would appreciate some compact UI mode very much. On 13" laptops it gets messy from time to time and makes it hard to focus on code.

[zzantares]

Yes please, it would be very helpful to at least know if this is something the VSCode team is considering.

[prudhvizylotech]

This feature would be really helpful, and, to add to the requested feature, hide option would be great in the right-hand corner. This can enable you to have some extra space when needed.

For now, I'm just using what @tiagosiebler has suggested. But I would love to see the hide option for the tab bar.

[yanisdb]

Same here, it would just be awesome to be able to hide this bar completly, especially in zen mode. But reading this thread from early 2018, in 2020, I couldn't figure if we're getting close to the solution, are we ? Or should we just use one of the quick/crafty solution ?

[dguendisch]

What's most frustrating about this issue is how easy it is to fix/implement, and despite so many people wanting it, nobody cares.

Obviously it's either not wanted so badly or not that easy to fix/implement so that someone (from the people wanting this) finally stood up and filed a PR. I want to have that feature too, but not so badly to justify the efforts it would take to fix it myself (i.e. start with learning typescript). I'm grateful for getting such a great Editor/IDE for free. I'm grateful for MS sponsoring the main investments and for the community helping and improving this software.

but this issue perfectly shows how they only care about features that are important to them, and not to the community.

Sure, why not, implementing features important to them is naturally more important to them, so they take precedence.

I do realize there are almost 5000 issues open here, but at the same time, when someone complained about that Christmas issue, remember how quickly it was resolved?

That's a strange comparison: the xmas issue made it to the top news of most IT sites, the "size-of-the-tab-bar"-issue surely won't.

VS Code is just going to slowly turn into one of those projects that will have 5+ year old issues that people constantly comment on and upvote, yet stay unfixed.

That's true of nearly all heavily used and bigger software projects. It's a matter of priorities and investmenets of limited resources: not only for MS but also for the community.

I understand being frustrated about old, unfixed, upvoted issues, but I don't get why one would want to blame exactly the one party (MS) that is already investing the highest fraction of resources into this project.

[yanisdb]

As I'm reading your post @dguendisch, a question came to my mind: could I implement this myself ? I wouldn't really know were to start and I have never participated in any open source project like this one, but could I? Would it get accepted just like this ?

[dguendisch]

@yanisdb PRs get accepted if they are correct, don't add or change features that contradict the products more global vision, don't change things in incompatible ways, you have signed the respective contributor license agreement and so on. Making the tab size configurable is most likely not something that needs too much discussion, vscode already allows to tweak & customize its UI in lots of detailed ways. So yes, I don't see why a sound PR for this feature shouldn't get accepted. Most OS projects typically have some contributors guide, so your start would be https://github.com/microsoft/vscode/wiki/How-to-Contribute If you are serious about implementing this feature I'd also start getting in touch with more experienced devs, a good place might be https://github.com/Microsoft/vscode/wiki/Feedback-Channels#slack

[flerxu]

Any update ?

[sean9keenan]

So this isn't a real fix - but this snippet that I just wrote will allow you to adjust the height:

.monaco-workbench .part.editor>.content .editor-group-container>.title .monaco-scrollable-element {
    height: 23px !important;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab {
    height: 23px !important;
}

.monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions {
    height: 23px !important;
}

.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: 23px !important;
}

Use this with the custom CSS loader plugin. This is obviously a hack, and will likely break in the future - but this is good enough for the moment for me, if it breaks in the future I might try and make a PR if such a feature would even be welcome by the core team 😅.

The default height is 35px, so this setting will save you 12px - and can be changed to any height you want (23px just feels right to me 😉). This could also be combined into one CSS statement, but I wanted it to be clear that there were 4 elements that were being modified (and if the selectors changes in the future, I'd be able to find them more easily)

[bitagoras]

@sean9keenan It doesn't change anything in my VSCode. I inserted your code in a file custom.css and added in settings.json the lines:

    "vscode_custom_css.imports": [
        "file:///C:/Program%20Files/Microsoft%20VS%20Code/custom.css"],
    "vscode_custom_css.policy": true

Is it still valid for VSCode 1.45?

[vianneychin]

@bitagoras try using https://marketplace.visualstudio.com/items?itemName=iocave.monkey-patch css and javascript loader

then put this in your settings.json

"customizeUI.stylesheet": {
        ".monaco-workbench .part.editor > .content .editor-group-container > .title .tabs-container > .tab": "height: 23px !important;",
        ".monaco-workbench .part.editor>.content .editor-group-container>.title .editor-actions": "height: 23px !important;",
        ".monaco-workbench .part.editor>.content .editor-group-container>.title .monaco-scrollable-element": "height: 23px !important;",
        ".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: 23px !important;",
},

which was borrowed from sean's css and it works for me

edit : however there is a bottom padding added to the editor

[sean9keenan]

@vianneychin @bitagoras - That plugin looks better 😅.

I found that "re-loading" the custom CSS loader plugin was a bit awkward and required restarting the whole VSCode instance (as well as running the "load custom css" command in the command palette).

On a broader note - would the core team even welcome a change where the height of the tabs could be changed via a single setting? (Perhaps I should go on one of the aforementioned slack channels, and check there)

[sean9keenan]

@vianneychin Ok - after a bit more digging I figured it out why there is padding at the bottom still. The issue is that the window into the text editor view itself sets fixed width / height values in... many places.

Unfortunately, I don't see an easy pure CSS solution - the correct fix is definitely to make a PR to the repo.

Which means that my above CSS does not save you any vertical space. Using this for a few days I do find that most of the benefit for me personally is in increasing the density of information at the top.

[chriszrc]

I'm using this extension already to get rid of the top title bar (and the traffic lights):

https://marketplace.visualstudio.com/items?itemName=iocave.customize-ui

And it also allows you to customize the tab row height:

I used this in settings.json:

"customizeUI.stylesheet": {
    ".monaco-workbench .part.editor>.content .editor-group-container>.title .tabs-container>.tab.sizing-shrink>.monaco-icon-label>.monaco-icon-label-container": "line-height: 32px !important",
    ".monaco-workbench .part.editor>.content .editor-group-container>.title": "height: 32px !important"
  }

[bitagoras]

Thank you guys!

[yanisdb]

@sean9keenan I've managed to set the sizes of the all divs containing the lines to 100% thinking it would fixe the issue but it did not work. The lines still disappear sooner. The size of the editor or should I say the number of line is not defined by the css code I think. When the line arrive at the bottom (or near to it) a script removes the div containing the line. Or at least something like that I think. But I still think we could still get it to work better and that we could win some space. The divs take 100% of the height but the line is still partly hidden (see the last line of the screenshort). The line is still there but nearly completely hidden. I'm not good enough in CSS or HTML to figure what it hidding though. Does anyone have an idea ?

[chriszrc]

@yanisdb try the approach here - https://github.com/microsoft/vscode/issues/42253#issuecomment-628688080

[yanisdb]

@yanisdb try the approach here - #42253 (comment)

What do you mean ? I've already used some custom css to make the tab bar disappear but its creates some kind of gap at the bottom. See my screenshot. My question was if someone new how to make disappear @sean9keenan last comment saying it's impossible. Does the comment help with that ? I think I might be failing to see how ?

Edit: I realise how unprecise my previous comment was. Sorry about that.

[chriszrc]

@yanisdb the approach I posted doesn't seem to create space at the bottom:

[yanisdb]

But you've still got the tab bar. We're not trying to achieve the same effect. I want only the window bar (which disappear in full screen) and no tab bar.

[chriszrc]

@yanisdb oh, now I see the problem, I only made my tabs a little bit shorter so I didn't notice but when I looked closer I can see that the code is not taking up the full height of the window. I added this CSS to fix this:

".editor .editor-container": "height: calc(100% - 31px) !important;",
".editor .monaco-editor .overflow-guard": "padding-bottom:6px !important",
".editor .editor-container .monaco-scrollable-element.editor-scrollable": "padding-bottom:6px !important",

I'm only subtracting six pixels from everything (with my shorter tabs) but since you're not showing any tabs you'll need to update calc to not substract anything, and add paddings of 30 something px-

[yanisdb]

I'm sorry @chriszrc but I don't get it and I can't make it work. Why are you adding padding to the bottom ? Aren't we trying to make a gap disappear and wouldn't adding some padding make my bottom gap bigger ? And height I've set it to 100% because I want the editor to fill the screen. Am I getting everything wrong ?

[vianneychin]

@yanisdb chris' recent solution only works if you disable the Breadcrumbs: Enabled to false in the Settings UI.

chris' solution works great for this particular setup

[yanisdb]

I've found a solution so easy that it really makes wonder why it's not option in VSCode directly. In this file https://github.com/microsoft/vscode/blob/master/src/vs/workbench/browser/parts/editor/editor.ts there is at line 19, this constant: export const EDITOR_TITLE_HEIGHT = 35. Setting it to 0 is exactly what i wanted. Now, the text gets cutted at the exact edge of the windows. I had to modify this file : C:\Users\yanis\AppData\Local\Programs\Microsoft VS Code\resources\app\out\vs\workbench\workbench.desktop.main.js but this doesn't seem like a long lasting solution as it will be overidden at each update.

[ghost]

it'll be great if there also has a setting to tweak the toolbar size.