Reduce tab height?

[Ed1]

I'm trying to reduce the vertical height of all tabs that may appear in the tab bar. I found an old thread in which Morat posted this:

"See the "Tab Bar - Reduce Height" section.

userChrome.css by black7375
http://raw.githubusercontent.com/black7 ... Chrome.css "

But the linked github item does not have a section to reduce tab height.

Is there a way to reduce tab height in current Firefox builds? I can't find other posts with code that works. Not sure if this is a matter of padding or overall height.

I am using FF 109 now.

[dickvl]

You can switch to Density: Compact mode and use this code in userChrome.css

Code: Select all

:root[uidensity=compact] {--tab-min-height: 26px !important}
#TabsToolbar, .tab-stack, .tab-content {
  height: var(--tab-min-height) !important;
}

https://support.mozilla.org/en-US/kb/co ... nd-firefox

[Ed1]

OK, dickvl, thanks. But is there a way to not use compact mode and specify a tab height using .css code in the userchrome file?

[dickvl]

Leave out the [uidensity=compact] part to make it apply to any density setting, but I use this because density-> Compact affects more.
You can adjust the value of the --tab-min-height CSS variable as needed.

Code: Select all

:root {--tab-min-height: 26px !important}

#TabsToolbar, .tab-stack, .tab-content {
  height: var(--tab-min-height) !important;
}

[Ed1]

dickvl, your code does work when placed above the namespace line in userchrome.css, without having to use compact mode.

But, I'm not sure reducing tab height has much effect on saving vertical space when the menu bar is shown. The blank space just above the tab bar and just below the menu bar just gets larger as the tab bar height is reduced.

Is there a way to reduce that space? Not sure if it is part of the tab bar, the menu bar or something independent of those.

[BruceAWittmeier]

It has been my experience that when .css code works in one area of the file and not another, there is some syntactical error(s) in the file causing failures of known good code. That may be the case with your userChrome.css file.

https://i.imgur.com/ptsmvCV.jpeg

The code dickvl posted works for me. Using dick's code and my theme -- no other userChrome.css mods generates the above image. I personally do not use the ...there.is.only.one statement anymore.

Code: Select all

#navigator-toolbox
   {
   border: 2px  solid  lightblue  !important;
   }

#nav-bar
   {
   border:  1px solid lightblue !important;
   border-style:  raised   !important;
   }

:root {--tab-min-height:  30px !important}

#TabsToolbar, .tab-stack, .tab-content
   {
   height: var(--tab-min-height)  !important;
   }

[Ed1]

@BruceAWittmeier, after your post, I tried again and verified the same behavior. The code beginning with ":root" works only when above the namespace line. The rest of my userchrome.css file is straightforward, but I will check it further for errors. This is on my Windows 11 system, which I see is the same as yours. And again, the Menu Bar, when visible, has a substantial blank space gap just below it. When the Menu Bar is turned off, the tops of the Tabs move right up to the top of my screen without any gap. So, perhaps the issue has to do with the Menu Bar on my system.

I see from your image that you have the Windows tool bar showing at the top of your Firefox screen. I do not have the Windows tool bar showing. On the Firefox screen, the close, minimize and maximize buttons are on the same line as the top toolbar - either the Menu Bar if it is displayed, or the Tab Bar if the Menu Bar is not displayed. I don't know if any of this is the reason that I have a blank area below the Menu Bar when it is displayed and you don't.

[dickvl]

You can use *|*:root to make the code work below the @namespace line

[siffemoz]

That namespace statement is almost never necessary any more.

https://www.userchrome.org/adding-style ... namespaces

@Ed1: "The code beginning with ":root" works only when above the namespace line." - because for the namespace statement to have effect, it has to be on the first line. So putting it after your code has no effect on your code.

@dickvl: "You can use *|*:root to make the code work below the @namespace line" - still, best not to use the statement at all IMO.