Navbar tabs oneliner tab height is too big

[emmarvpol]

Hello! Thanks for your amazing work!

I have an issue. I just added the css of navbar_tabs_oneliner.css to my userChrome.css and it works but the height of the tabs is greater then navbar. You can see the screenshot bellow.

Firefox version: 97 OS: Arch linux

Thanks you very much!

[MrOtherGuy]

This might be related to #169

As such, you might want to test if this bit of CSS helps:

#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container{
  height: min(2.7em, var(--tab-min-height)) !important;
}
.tab-label{ line-height: 1.2 !important; }

Also, does this happen with just navbar_tabs_oneliner.css or do you have other changes as well?

[eribertomota]

Hi @MrOtherGuy,

I saw the possible solutions in #169 and this procedure solved the problem for me. Debian 11 Bullseye with Firefox 91.6.0esr and multi-row_tabs.css.

Thanks a lot for your help.

[emmarvpol]

Yeah! This solves my problem too! Thanks you very much!! navbar_tabs_oneliner.css is the only one Im using. I did not added any thing else.

[MrOtherGuy]

Cool, good to know. I really would like to figure out what exactly causes this in the first place. I haven't yet been able to reproduce the issue in my Fedora 35 or Windows 10 so if anyone has ideas what I need to do to reproduce it I'm all ears.

[eribertomota]

But after restart Firefox twice, the problem goes back.

[eribertomota]

Cool, good to know. I really would like to figure out what exactly causes this in the first place. I haven't yet been able to reproduce the issue in my Fedora 35 or Windows 10 so if anyone has ideas what I need to do to reproduce it I'm all ears.

Debian 11 with Firefox via apt install firefox-esr.

[MrOtherGuy]

What kind of system font/text size settings do you guys have? I can sort of reproduce this if I increase the OS interface text size - although to have such radical effect as seen in the images in this issue I'd need to make the text size absolutely massive.

[eribertomota]

I use KDE Plasma and my fonts are 10pt.

[emmarvpol]

Im using i3-gaps with Monofur Nerd Font 14. I tried it to my virtual machine with xfce4, firefox 91.5.0esr, font: Cantarell regular 11 and its working without any problem. I will try to change some fonts to see.

[eribertomota]

I don't know if I am a bit confuse in this topic. My problem is related to described in #169. The vertical size of the tabs was increased in FF 91. The space between the rows too. I use 7 rows.

In a first moment, the changes above solved this issue. However, after a new restart, the problem gone back.

[MrOtherGuy]

Yeah, Cantarell regular at 11pt works fine for me - and a whole bunch of other fonts too.

At this point all I can say that it definitely is affected by text size. I could add this "fix" to affected stylesheets I guess. It would cause a small unfortunate side-effect for folks who don't experience any issue though, so I'm trying to figure out how to make it less "destructive"

In a first moment, the changes above solved this issue. However, after a new restart, the problem gone back.

That sounds very weird - I have no idea what might be causing that. But sure, if this "fix" isn't working then it's expected that tab rows are too tall. I'm 95% sure that the same underlying thing causes both issues.

[MrOtherGuy]

Could you folks test if this bit would solve the issue:

#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container{
  height: var(--tab-min-height) !important;
}
.tab-label{ line-height: 20px !important; }
:root[uidensity="compact"] .tab-label{ line-height: 18px !important; }

Using fixed size line-height size line-height should not mess up layout so much for unaffected systems - I hope.

[emmarvpol]

Sure. I tried it and its fixing the problem. The first one fixed my problem too. I mean this one:

#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container{
  height: min(2.7em, var(--tab-min-height)) !important;
}
.tab-label{ line-height: 1.2 !important; }

[MrOtherGuy]

Alright, thanks.

I wonder if it would be better to add a separate file just for this "fix" though, since there are a whole lot of styles that would need it. I wouldn't want to add these rules to all of them if it could be avoided. But I don't know just yet what the best course of action would be.

[eribertomota]

Hi @MrOtherGuy,

The last suggestion didn't solve the problem for me.

Thanks!

[MrOtherGuy]

@eribertomota That's unfortunate for sure, but previously you said that the previous snippet helped at first but then it suddenly didn't. To me that sounds like there may be something else going on on your setup in addition to this problem.

Does your userChrome.css contain anything else except contents of multi-row_tabs.css followed by this snippet:

#tabbrowser-tabs:not([secondarytext-unsupported]) .tab-label-container{
  height: var(--tab-min-height) !important;
}
.tab-label{ line-height: 20px !important; }
:root[uidensity="compact"] .tab-label{ line-height: 18px !important; }

[eribertomota]

No. I commented all other lines before to test.