With Mozilla's latest Firefox Proton update, Mozilla seems to not have graduated from design school because their tab spacing is absolutely terrible and the following snippets from [Improved Tab-Toolbar FF89 Proton+](<https://www.reddit.com/r/FirefoxCSS/comments/nsczoo/improved_tabtoolbar_ff89_proton/>) by u/thereact0rr do multiple things related to fixing Mozilla's bad tab spacing decisions which also make it easier to look like Brave.
As you can see by the following images, Mozilla presumably thought that adding a big fat space between pinned tabs and non-pinned tabs would be a good way to differentiate each type, but the fact that pinned tabs don't have any text attached to them must have flown over their heads. This fixes the problem by making the space between pinned and non-pinned tabs equal to that op the top padding.
Before
After
/* Reduce Spacing Between Pinned And Regular Tabs */
#tabbrowser-tabs[haspinnedtabs]:not([positionpinnedtabs]) > #tabbrowser-arrowscrollbox > .tabbrowser-tab[first-visible-unpinned-tab] {
margin-inline-start: initial !important;
}
For some... weird, odd, and just plain out obscure reason, Firefox has this completely useless, fat left-margin space when your window isn't maximized and I deeply question Mozilla's choices with this. Anyway, we have completely obliterated it in the name of design.
Before
After
/* Obliterate Space To Left Of Toolbar */
.titlebar-spacer[type="pre-tabs"] {
display: none !important;
}
Now this. This. What the hell was this. Why isn't the padding on the left of the first tab equal to that around the tab. Another quick fix for a silly problem. Also getting rid of some padding from the new tab button, which is changed later.
Before
After