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.

[aromeronavia]

2022. Feature not done yet 😢

[nidefawl]

@TheMFB The "tabs-container .monaco-icon-label" rule has an incorrect semicolon after font-size

[AndiKod]

It worded out for me with the "Custom CSS and JS Loader" but it's still a hack.

My tabs are set to "shrinked" mode, close button off, from the regular User.settings pannel, plus the @pavlexander code in the custom.css local file. For some reasons the height didn't applied to .tabs-container with the css variable, so I hard-coded it to 20px at the end of the file.

It was a quick & mindless test, but as it seems to be enough, i'll keep it that way.

[joewelds]

Plus 1 for this feature.

[RyannDaGreat]

I'm adding this comment to keep this issue alive...I want this feature! It would be nice to have it configurable by themes

[Kein]

There is no reason to update this thread. Take a look at the history of VSCode medium and below-medium "sized" (in terms of community attention as the Code dev team gauges it) features - if it is not something some popular person tweeted or said, you can expect approximately ~5-10 years period.

Therefore, I suggest to fallback to user-suggested workarounds and just subscribe to issue.

[nidefawl]

I am using my own extension for this. It is monkeypatching the javascript code and CSS for sidebar, panel title bars, window title bar and editor tabs to a custom height. It also allows setting background images

The code is up here https://github.com/nidefawl/vscode-custom-loader for anyone interested

[ghost]

I moved from vscode to neovim precisely because of the lack of this feature.

Bloat code :

Neovim :

[dannymichel]

https://github.com/nidefawl/vscode-custom-loader

I don't see documentation for this.

[onolox]

I am using my own extension for this. It is monkeypatching the javascript code and CSS for sidebar, panel title bars, window title bar and editor tabs to a custom height. It also allows setting background images ![Screenshot_20220518_192223]

The code is up here https://github.com/nidefawl/vscode-custom-loader for anyone interested

Great implementation, but you NEED at least a small documentation on how to use it.

[benibenj]

In the newest insider we now support a setting to reduce the editor tab height. The compact option reduces the height to the same height as breadcrumbs. The setting also applies to the editor title when tabs are not shown.
We are not planning on adding a larger mode as we don't believe users will need this. However, let us know if this would be the case for you.

You can try to reproduce with our nightly insider builds. You can give our preview releases a try from: https://code.visualstudio.com/insiders/

[Kein]

Is this planned for the next release?

[benibenj]

@Kein yes, this will be part of the September release

[Limezero]

The current implementation of this doesn't seem to let you configure how high you want your tabs to be, only switch between a preset height of 35 (way too tall) and 22 (way too short for my liking). Is there any way we can define a height manually?

I saw --editor-group-title-height in the commit, but I have no idea how this variable is defined or if it's accessible as a command line flag, or a JSON entry, or what.

[Limezero]

Really stupid workaround for those who need it:

1. Open VSCode/resources/app/out/vs/workbench/workbench.desktop.main.js in a text editor
2. Search for the text normal:35,compact:22
3. Change the "compact" value to be something else
4. Enable compact mode in the settings

This should survive future code changes and be a fairly reliable way of setting a custom value, at the cost of "corrupting" your installation and getting warned about that.

Also works with a height of 0 (for a different look compared to "workbench.editor.showTabs": false)

[Kein]

The current implementation of this doesn't seem to let you configure how high you want your tabs to be

1. Open VSCode/resources/app/out/vs/workbench/workbench.desktop.main.js

I can't stop laughing, we are back to where we started: editing VSCode resources. Everything is implemented in a typical MS fashion 🤣

[FabioM3]

Because of this M$ wants to obfuscate the code to stop people to mess with their holy code...

[imoby]

@benibenj I want to thank you for allowing the option for compact tabs but I still feel there is need for larger tabs for those who wish to have that. should that be a separate issue then?

[benibenj]

@imoby I suggest you make a new issue specifically for this. We can then better see how many users would need this and why. Looking threw the timeline of the current issue, I mostly see people interested in smaller tab heights.

[Limezero]

Is there a good reason not to expose the height variable to users and let them set it to whatever they want? I can't see this leading to anything except years of further complaining - "yes I wanted taller tabs but not THAT tall", "no actually I wanted even shorter tabs, this doesn't work for me".

It's a bit like people requesting the ability to use smaller or larger fonts, and then years later adding the ability to use exactly 10pt high text under a "compact" option.

Also, with respect to the number of people needing this, why exactly does that matter? What percentage of VSCode users use a screen reader or the high contrast theme, 0.001%?