Search Support

Avoid support scams. We will never ask you to call or text a phone number or share personal information. Please report suspicious activity using the “Report Abuse” option.

Learn More

How to make tab bar thinner (height)

  • 4 replies
  • 1 has this problem
  • 4200 views
  • Last reply by Barry

more options

I've searched this topic since last week and I haven't come up with a proper solution. The "density" solution is still too big for me. I tried doing css, but I don't know what I'm doing wrong because there's no effect.

If you know anything how to make the tab bar thinner to make it less intrusive to the websites I always visit, please let me know. And btw, I'm not that smart in changing settings, and especially in coding like css so please do a step by step of everything I need to do if you know a solution. Thank you so much

I've searched this topic since last week and I haven't come up with a proper solution. The "density" solution is still too big for me. I tried doing css, but I don't know what I'm doing wrong because there's no effect. If you know anything how to make the tab bar thinner to make it less intrusive to the websites I always visit, please let me know. And btw, I'm not that smart in changing settings, and especially in coding like css so please do a step by step of everything I need to do if you know a solution. Thank you so much

Chosen solution

Hi Barry, there is a way to restore the Compact density. That's the easiest thing to try. See Compact mode workaround in Firefox or https://www.userchrome.org/firefox-89-styling-proton-ui.html#compactmode.

Otherwise, I have a rules builder which you can use to can re-connect the buttons as tabs and shorten their height.

Read this answer in context 👍 1

All Replies (4)

more options

If I remember correctly, Firefox have global scaling factor for the entire browser, including toolbars and content.

Step 1: Open a new tab, type or paste "about:config" in the address bar and press Enter. Click the button accepting the risk.

Step 2: In the filter box, type or paste devp and pause while the list is filtered

Step 3: Double-click layout.css.devPixelsPerPx and change its value to 1.5 and click OK. That corresponds to 150% of the classic font size. Originally is -1.0 from my side. You can play around it between 1.0 to 4.0 in order to suit you.

Noted: Before doing this, please do remember your initial settings in case you want to change back.

I hope this will help you.

more options

Chosen Solution

Hi Barry, there is a way to restore the Compact density. That's the easiest thing to try. See Compact mode workaround in Firefox or https://www.userchrome.org/firefox-89-styling-proton-ui.html#compactmode.

Otherwise, I have a rules builder which you can use to can re-connect the buttons as tabs and shorten their height.

more options

To make the height of the tab bar less then you can use this code in userChrome.css.

Add code to the userChrome.css file below the default @namespace line.


@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* only needed once */

/* ROOT - VARS */
*|*:root {
 --tab-min-height:      25px !important; /* adjust */
 --tab-min-width:       60px !important; /* adjust */
}

/* TABS: height */
#tabbrowser-tabs,
#tabbrowser-tabs > #tabbrowser-arrowscrollbox,
.tabbrowser-tabs .tabbrowser-tab {
  min-height: var(--tab-min-height) !important;
  max-height: var(--tab-min-height) !important;
}

See also:

Modified by cor-el

more options

Thank you for all of the solutions. I tried everthing and everything worked. Sadly i cannot choose multiple solutions lol. Thanks again