reduce tab bar height

[SilverMarcs]

The current implementation of tab bar seems gigantic. Perhaps the height can be reduced for better screen estate?
Or is it like this because it wants to be as close to gnome web as possible? if so, how do I manually reduce the tab bar height along with proper scaling of font of tab names?

[rafaelmardojai]

Yeah, it's intended to follow GNOME aesthetics.

You can set the tabs height like this:

/* reduce tabs to 30px */
tab > stack {
	height: 30px !important;
	min-height: 30px !important;
}
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
    min-height: 30px !important;
}

But remember that if there's a button on the tabsbar, like Show all tabs or New tab, the tabs will expand to it's height and you will also need to reduce tabsbar buttons height with this:

/* 4px less than the tabs height */
#TabsToolbar .toolbarbutton-1 {
	height: 26px !important;
	max-height: 26px !important;
	min-height: 26px !important;
}

[SilverMarcs]

Ah cool thank you. Could you also give the code to reduce thickness of active tab blue bar color? with the reduced tab height, the default thickness looks overkill.

[rafaelmardojai]

Sure

.tab-background[selected="true"] {
	border-bottom-width: 2px !important;
}

[SilverMarcs]

Hi again. The code to reduce tab bar height no longer seems to work on the beta channel. Could you kindly provide an update to it? im still on firefox 88 btw

[rafaelmardojai]

The same code but add .tab-content and .tab-background to the first selector:

tab > stack,
.tab-content,
.tab-background {
	height: 30px !important;
	min-height: 30px !important;
}

[SilverMarcs]

This seems to work partially. Theres an empty space below tabs

This is what my userchrome looks like

/* reduce tabs to 26px /
tab > stack,
.tab-content,
.tab-background {
height: 26px !important;
min-height: 26px !important;
}
#tabbrowser-tabs[positionpinnedtabs] > #tabbrowser-arrowscrollbox > .tabbrowser-tab[pinned] {
min-height: 26px !important;
}
/ 4px less than the tabs height */
#TabsToolbar .toolbarbutton-1 {
height: 22px !important;
max-height: 22px !important;
min-height: 22px !important;
}