multi-row_tabs.css - height changed on 91.6esr vs 91.5esr

[j1warren]

I've had 91 (up to 91.5.0) tabbar set up as was on my 78esr. But after upgrade to 91.6.0 height of tabs became bigger, which is strange since ESR shouldn't have such changes. Could somebody test and disect what should be done to revert the height on 91.6?

my file vs current multi-row_tabs.css

 :root{
     --multirow-tab-min-width: 100px;
-    --multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
+    --multirow-tab-dynamic-width: 0; /* Change to 0 for fixed-width tabs using the above width. */
 }

 /* Scrollbar can't be clicked but the rows can be scrolled with mouse wheel */
@@ -28,6 +28,9 @@
 }

 @-moz-document url(chrome://browser/content/browser.xhtml){
+  
+  /* Dummy variable to support both versions 89-90 */
+  :root{ --tab-block-margin: var(--proton-tab-block-margin) }

   #scrollbutton-up~spacer,
   #scrollbutton-up,
@@ -70,9 +73,6 @@

 .tabbrowser-tab > stack{ width: 100%; height: 100% }

-/* remove bottom margin so it doesn't throw off row height computation */
-#tabs-newtab-button{ margin-bottom: 0 !important; }
-
 #alltabs-button,
 :root:not([customizing]) #TabsToolbar #new-tab-button,
 #tabbrowser-arrowscrollbox > spacer,

[MrOtherGuy]

I think you are seeing something like the following:

The text size in your tabs is so big that it forces the tab to be taller than --tab-min-height. That also slightly messes up row height computation.

If I'm correct then this was caused by bugfix to a small privacy issue - that's why it's been uplifted to ESR. Under some circumstances a website could have caused the tabs to become taller than normal by using certain characters in the title. So, to fix that the tab label container was changed to have set height. That height on the other hand depends on the text size - and now if your text size is big, then what can happen is that the label box height may make the whole tab (and thus toolbar) taller.

Easiest fix for the above would be to make tab text smaller: Like this perhaps:

.tabbrowser-tab{ font-size: 0.9em }

Another thing you could try would be:

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

This essentially clamps the height of the label box to the tab-min-height variable. But doing so requires modifying the label line-height because otherwise the secondary label (such as "muted") will not fit the tab.

[j1warren]

First fix made text smaller, but tabs' height was still big. Second fix did the work.

Once again, thank you, @MrOtherGuy!

[MrOtherGuy]

Nice. Does multi-row_tabs.css cause this on it's own, or is it triggered by whatever other style you have? And btw. what OS do you have?

I'm trying to figure out if I should make changes to the style (and to which style if any), but since I'm pretty sure this is triggered depending on the text size, which itself depends on the OS, I don't really know what the best course of action would be.

[j1warren]

I'm on Ubuntu 20.04, Plano theme.

Repo was cloned when v91 was released.

@import url("chrome/multi-row_tabs.css");
@import url("chrome/compact_urlbar_megabar.css");
@import url("chrome/urlbar_popup_full_width.css");
@import url("chrome/show_window_title_in_menubar.css");
@import url("chrome/compact_proton.css");
@import url("chrome/non_floating_sharp_tabs.css");

#urlbar{}
.urlbarView-row-inner{ padding-inline-start: 100px !important; }

#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 I have font.system.whitelist set up, since RFP in 91 messed with fonts (whitelisted only few) and window's font was awkward.

[jtagcat]

Nice. Does multi-row_tabs.css cause this on it's own, or is it triggered by whatever other style you have? And btw. what OS do you have?

Fedora 35 Wayland; Nightly; I've been using unmodified multi-row_tabs.css and did notice the tabs getting larger a while back.

[MrOtherGuy]

Nice. Does multi-row_tabs.css cause this on it's own, or is it triggered by whatever other style you have? And btw. what OS do you have?

Fedora 35 Wayland; Nightly; I've been using unmodified multi-row_tabs.css and did notice the tabs getting larger a while back.

I should have perhaps been more clear: The point is that size of tabs should be the same with vanilla Firefox and multi-row_tabs.css

So, I'm interested in comparison to current vanilla Firefox, not comparison to whatever it might have looked like in the past.

[jtagcat]

Uhh.. it looks vanilla Firefox 'Normal', I'm using compact, where it does not look normal.

[MrOtherGuy]

Hmmm. I'm not sure what this means but on my Fedora 35 with (also with Wayland) the size of the tabs area is exactly the same with vanilla Firefox and with multi-row_tabs.css (obviously when there's only one row of tabs.)

I mean, the sizes are exactly the same in both normal and compact density.

[jtagcat]

Huh, ok, don't know, nevermind.