Revert and unfloat tabs in Firefox 91+

Firefox 89+ introduced floating tabs for some reason. Talk about terrible UI! When I upgraded to 91, it undid my settings, so I looked for a permanent solution: setting up your own stylesheet.

Prerequisites #

Assuming you’re using Firefox:

i. Enable stylesheet customization

  1. Go to about:config by typing/pasting into URL bar
  2. Type into the searchbar toolkit.legacyUserProfileCustomizations.stylesheets
  3. Set to true (press the toggle ⇌ icon)

ii. Create userChrome.css file

  1. Go to about:support
  2. Under Application Basics > Profile Folder, press [Open Folder]
  3. Create a chrome folder
  4. Go into the new folder
  5. Create a userChrome.css file
📁 How to show file extensions (such as .css)? #

On Windows, go to File Explorer and the View tab. Check “Show File Extensions”.
Screenshot of the checkbox location

Stylesheet for normal tabs #

  1. Copy paste into userChrome.css:
/* No floating tabs */
border-radius: 0px 0px !important;
margin-bottom: 0px !important;
/* Glazed inactive tabs */
.tabbrowser-tab:not([selected=true]):not([multiselected=true]) .tab-background{
background-color: color-mix(in srgb, currentColor 5%, transparent);
/* Reduce Menu Padding */
menupopup > menu, menupopup > menuitem{
padding-block: 2px !important;
--arrowpanel-menuitem-padding: 2px !important;
/* Match Titlebar to OS theme color. Delete this class if you want the default navy blue */
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
  1. Save the file
  2. Restart Firefox

The solution is based on this article and, but those sites have too much info! I couldn’t figure out how to make a userChrome.css file because the article would just not tell me. I eventually googled it somehow.