Open file tab width - Varying to filename length


An option (or plugin) so that title tabs for the open files have widths of their respective file names - would be awesome. Is there a way to achieve this?

Currently each tab has the same width regardless of file name length. This can be irritating if your files have short names and the whole title bar is taken up with large tabs that have large padding.

Atom is a browser under the hood, so you use the built-in developer tools and their inspector to find DOM elements and their respective CSS styles.

The selector responsible for the tab-width should look something like the following (it depends on the ui-theme you’re using):

.tab-bar .tab,
.tab-bar {
    flex: 1 1 0;
    max-width: 22em;
    min-width: 7em;

To see the full file-name in the tab, I guess you could set max-width to max-content (or maybe fit-content). Either way, you can put your style into your user stylesheet (accessible through the Atom menu or at ~/.atom/styles.less).

1 Like

Thanks a bunch - followed your instructions and it works great. max-width: fit-content with a bit of padding and job done!