Compact-er vertical tabs on Firefox v157's new Nova design

Firefox recently updated to v157.0 on my machine, and with it came what looks to be a new design system (seemingly called Nova). It honestly looks nice, except for one thing so far: I find that the vertical tabs on it is just so sparse.

I like my tabs quite dense (which is the reason I went vertical in the first place), since I want to be able to see all (most?) of my work at once.

If you think the same, this is how I made mine much denser again.

Make vertical tabs great again

Before anything, make sure Firefox uses custom styles for your browser UI. Go to about:config on your browser, then accept the warning. Look for the option named toolkit.legacyUserProfileCustomations.stylesheets, and set that to true.

Next, we need to find your Firefox profile folder. Go to about:support, find the table row labeled "Profile Folder", then just click the Open Folder button that should be right beside it.

This will take you inside a folder in your computer with a lot of files. We won't be touching any of these --- instead, create a new folder and call it just chrome. Go into it.

Inside this chrome folder, create a file called userChrome.css. The contents of this file is quick and easy:

#tabbrowser-tabs[orient='vertical'] {
  --tab-min-height: 26px !important;
  --tab-margin-block: 1px !important;
  --tab-padding-block-start: 0px !important;
  --tab-padding-block-end: 0px !important;
}

Feel free to tweak the numbers as you see fit, then restart Firefox. If all's well, it should read your userChrome.css, and apply the changes to your vertical tab bar.

Note that I chose 26px because going any lower seems to make the favicon and tab close buttons feel too cramped --- I might look into adjusting those as well, but right now how the 26px looks feels right for me.