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”.

Stylesheet for normal tabs #

1. Copy paste into userChrome.css:

/* No floating tabs */
.tab-background{
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;
}
:root{
--arrowpanel-menuitem-padding: 2px !important;
}
/* Match Titlebar to OS theme color. Delete this class if you want the default navy blue */
.titlebar-color{
color: -moz-accent-color-foreground;
background-color: -moz-accent-color;
}

2. Save the file
3. Restart Firefox

The solution is based on this article and userChrome.org, 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.