[MULTIROW TABS SUPPORT THREAD] - multiple tab lines

[nykoo]

First of all, Thank you for this FF57 life saver repo 👍

Maybe you can save my live by finding a solution to had multiple lines tabs possible (was possible via Tab Mix Plus prior to FF57). This will be great as i downgrade back to FF56 for this, session manager and passifox.

I'm not so confindent asking this as even chrome don't have this function :/

I really need this.

[maraigue]

https://00.bulog.jp/archives/1476 (article in Japanese)
Writing this code in userChrome.css can make the tabs aligned as multiple lines.

[Aris-t2]

Good find thanks.

It actually works up to Firefox 59.

Here is the port for this projects squared tabs size:

/* multi line tabs */
/* all credits go to https://00.bulog.jp/archives/1476 */

/* titlebar buttons */
#titlebar-buttonbox {
  vertical-align: top !important;
  display: block !important;
}
.tabbrowser-arrowscrollbox scrollbox {
  overflow: visible !important;
}
.tabbrowser-arrowscrollbox scrollbox > box {
  display: block !important;
}
/* titlebar button height */
toolbarbutton.titlebar-button {
  min-height: 31px !important;
}
/* tabs right position */
.tabbrowser-tabs {
   margin-right: -41px !important;
}
/* tab size */
.tabbrowser-tab:not([pinned]) {
  min-height: 26px !important;
  max-height: 26px !important;
}
.tabbrowser-tabs .tabbrowser-tab {
  vertical-align: top !important;
  -moz-box-sizing: border-box !important;
  min-height: 26px !important;
  max-height: 26px !important;
}
/* new tab size */
.tabs-newtab-button {
  vertical-align: bottom !important;
  height: 27px !important;
}

[nykoo]

i downgrade to FF56for now, but i will try your code as soon as i upgrade again to FF57... When i'd found a solution for my other missing addons functions.

Thank you very much @maraigue and @Aris-t2 :)

[macrogreg]

Thank you for the above CSS code snippet. I was about to uninstall Firefox - I kept using it for the multi-row tabs and their "upgrade" meant there is no longer a reason for me to stick with it. Because I am not aware of a different browser that can do multi-row tabs and due to your solution, I might use it for a little longer. :)

Note, the X (aka "close") buttons are a little annoying in the above solution. If you want to get rid of them, add the following to your userChrome.css:

.tab-close-button {
    display: none;
}

[aapo]

Code works, almost:
*It breaks 'new-tab-button'. Button doesn't even get focus anymore. For workaround adding button on toolbar: https://addons.mozilla.org/fi/firefox/addon/simple-new-tab-button/
*It breaks moving tabs with dragging. Any tab can be moved, but it can be dropped only to the first row (if there are two rows).

Suggestions:

/* Button for scrolling tabs to the left */
.scrollbutton-up{
    display: none;
}

/* Button for scrolling tabs to the right */
.scrollbutton-down{
    display: none;
}

/*Drop-down menu for all tabs */
#alltabs-button{
    display: none;
}

I don't know how to hide (this non-working) new-tab-button. Hiding .tabs-newtab-button is not working, anybody?

And for @macrogreg, I found that works very well: https://github.com/Aris-t2/CustomCSSforFx/blob/master/classic/css/tabs/tab_close_show_on_hover_only.css

[Aris-t2]

.tabs-newtab-button is the button in tab form after tabs.
#new-tab-button is the button shown in overflow mode.

[stampis]

any way to use this as some sort of hack solution to the #navbar aswell?
I've been using Icons + Text for back/forward/refresh etc..
And i want the location bar under those buttons.
With CTR that was easy, just pop in a "additional toolbar" under the buttons and move the locationbar to that..
Would it be possible to use some overflow css rule to the navbar and set the min/max width to force it to overflow to a "new" row?

[Aris-t2]

Navigation toolbar contains flexible items like address bar and search bar and some toolbar items/buttons get hidden once there is not enough space left for them to be displayed.

Because of that it most likely is not possible to create a multi lined navigation toolbar.

[Karlston]

Do you intend to incorporate this into CustomCSSforFx?

From what I've read multi-row tabs is a popularly requested feature.

Thanks

[eureekasigns]

To OP: This has been working well for me.
Allows multiple rows, and gives a scrollbar when it reaches 3.
Not perfect, but it's workable. Some issues with it - can't scroll with mouse, and dragging to different locations is quirky.

One other thing, is that with the rest of the default CSS changes Aris-t2 provides, one of them breaks the tab height appearance (I forget which). Generally, I have disabled most of those default settings, as I haven't had time to find exactly which one(s) are not getting along and why.
In my case, I have commented out lines (version 1.3.5 ) 36, 47, 172,
and UN-commented 201 (tabs below nav toolbar), though that one is my preference.

Note: you can also change the number of rows in the line below that looks like this (change 3 to something else)
max-height: calc(3*var(--tab-min-height)) !important; /* 3 rows */ )

From here: https://www.reddit.com/r/FirefoxCSS/comments/7dclp7/multirow_tabs_in_ff57/

/*
The class .tabbrowser-tabs has been replaced with id #tabbrowser-tabs
changed selectors accordingly
*/
.tabbrowser-tab:not([pinned]) {
    flex-grow:1;
    min-width:94px !important; /* Needed important tag, width can be whatever you like */
    max-width: 94px !important; /* none - Makes the tabs always fill the toolbar width */
}
.tabbrowser-tab,.tab-background {
    height:var(--tab-min-height);
}
.tab-stack {
    width: 100%;
}
#tabbrowser-tabs .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
    overflow-y: auto !important;
    min-height: var(--tab-min-height);
    max-height: calc(3*var(--tab-min-height)) !important; /* 3 rows */
}
#tabbrowser-tabs .arrowscrollbox-scrollbox {
    overflow: visible; 
    display: block;
}

#titlebar,#titlebar-buttonbox{
    height:var(--tab-min-height) !important;
}
#titlebar{
    margin-bottom:calc(var(--tab-min-height)*-1) !important;
}
#main-window[sizemode="maximized"] #titlebar{
    margin-bottom:calc(6px + var(--tab-min-height)*-1) !important;
}
#main-window[sizemode="maximized"] #TabsToolbar{
    margin-left:var(--tab-min-height);
}
#titlebar:active{
    margin-bottom:0 !important;
}
#titlebar:active #titlebar-content{
    margin-bottom:var(--tab-min-height) !important;
}
#tabbrowser-tabs .scrollbutton-up,#tabbrowser-tabs .scrollbutton-down,#alltabs-button,.tabbrowser-tab:not([fadein]){
    display: none;
}

/* This enables maximum width before scrollbar is shown */
#main-window[tabsintitlebar] #tabbrowser-tabs {
    -moz-window-dragging: no-drag;
}		 

[Aris-t2]

Anyone seen a solution for the tab dragging issue yet?

[LESHIY-ODESSA]

Hello.

There are installed tabs in two lines - tabs_multiple_lines_v2.css

In the classic Windows theme, when you open a video from youtube to the full screen on the vertical scroll (1), a shadow appears (2) and if you close the tabs to hide it disappears, the shadow remains (3).

[Aris-t2]

This will be fixed on next update.

[simoncarne]

I have been experiencing a strange issue when I activate either tabs_multiple_lines.css or tabs_multiple_lines_v2.css in conjunction with the option to restore open tabs from the previous session. I find that in addition to the open tabs, the new session opens up three additional tabs that I had previously closed.

As a test that it really is the multi-row function that is doing this, I opened up a brand new profile and made just two changes: (i) setting the option to restore tabs from the previous session and (ii) installing the chrome folder with userChrome.css containing a single line of code to activate tabs_multiple_lines_v2.css. After step (i), the browser worked just fine. But as soon as I carried out step (ii), the three additional tabs reappeared when I opened a new session.

Does anyone have any suggestions for resolving this (or why it occurs)?

A couple of extra comments, in case they help:

1 I have been operating with this for several weeks and I notice that the extra (previously closed) tabs change over time to be replaced by more recent tabs (but still tabs that I had closed).

2 If I deactivate tabs_multiple_lines_v2.css, I have to restart Firefox twice in order to return the browser to normal behaviour (ie no extra tabs).

[Aris-t2]

@simoncarne
I've seen this behavior with multiple tab line settings too, but its not reduced to this case only. Sometimes even without having multiple tab lines ghost tabs magically reaper after restoring sessions.

In the past session restorers never played well with tab modifications achieved by add-ons or custom code. Maybe this misbehavior was carried over to Firefox 57+ as well. For some reason session managers seem to save more information than just the currently opened tabs and cause issues, when this information gets restored.

[TroudhuK]

https://github.com/TroudhuK/userChromeJS/blob/master/MultiRowTabLiteforFx.uc.js broken with Firefox 106... I try to fix it, if someone can help me to easily know what are the changes between 105.0.3 and 106.0 (or to do the fix)...

Edit: fixed

[bottleblue]

I installed it. It works well. But the tabs are too narrow. Do you know how to make them wider?

[stonecrusher]

Does just changing the browser.tabs.tabMinWidth preference not work?

[bottleblue]

I don't see this line in 01-MultiRowTabLiteforFx.uc.js or any of the other files I downloaded.

Edit: I see it's in the about:config. Yes that seemed to work thx. Is there a way to adjust the tab height also?

Edit 2: ok I got it. In 01-MultiRowTabLiteforFx.uc.js there's two lines that say .tabbrowser-tab,#tabs-newtab-button { height: calc(8px + var(--tab-min-height)); } and #TabsToolbar > .titlebar-buttonbox-container .titlebar-button { height: calc(8px + var(--tab-min-height)); padding: 0 !important; width: 46px; }
I changed the 8px to a lower number and that changes the tab height.

[bottleblue]

@bottleblue In order to use .uc.js scripts you have to make some preparations once. See readme of the repository I linked above.

Just a question, you have to disable AutoConfig sandboxing to use this script. Does that mean sandboxing is completely turned off for Firefox? I'm wondering if using this is worth the risk.

[TroudhuK]

Fixed for Firefox 133

[glennpc]

There's an extra space below the tabs on fx107.0b2 when using tabs_multiple_lines.css
This wasn't present on fx106 or earlier versions.
I even tried removing the "List All Tabs" button by setting this to false:
browser.tabs.tabmanager.enabled

[Aris-t2]

Is this a Fx 107 issue only? I can not reproduce it on Firefox 106 or 108.

[glennpc]

Yes @Aris-t2 Fx 107 only.

[glennpc]

Just now updated to Fx 107.0b3 and still the same issue.

[Aris-t2]

Add this to the bottom of the corresponding CSS file:

box.scrollbox-clip[orient="horizontal"] {
  display: inline !important;
}

[glennpc]

Thanks @Aris-t2, that did it!

[Crybal]

1.Before the 115 version I could move the tabs (multirow). Now,whatever I tried ,I cannot do it.Any trick for it?
2.I also have a problem as it appears below.The navigation buttons overlap the main menu.How can I increase the height of the menu bar?

Thanks.

[Aris-t2]

Moving tabs was actually "fishy" right from the start, if only the CSS code was used. Look through the thread. Only the JavaScript version of this feature worked the way it should.

Does the issue with overlapping buttons/menubar happen with the latest version of this projects files?
Have you tried to reduce menubars text size? Does not seem to be the default one.

[arcanetrivia]

I think moving tabs has been at least semi-broken for a while now? But it does seem to have broken further, recently.

Actually I can, kinda, move tabs around, but it's difficult to make a tab land where I would want it. The target blank space showing where the tab would be dropped wants to stick to the first or third rows (in my case) and I can't successfully target the second; and then getting it in a certain position side to side is also very inconsistent behavior. My tab width settings are wider than default which may also be affecting things.

[TroudhuK]

I forgot to upload the Firefox 112 update for my Multi-Row userChrome JS, you can try it: https://github.com/TroudhuK/userChromeJS/blob/master/MultiRowTabLiteforFx.uc.js

@Crybal : It's because the big font for menus, you have to increase the value in tabs_below_navigation_toolbar_alt.css line 42 (18px by default).

[Crybal]

It doesnt work.As I can see it looks like the height of the field the address bar is in (including the buttons),is not that high to fit in. This field should be 5-6px higher

[bottleblue]

Using tabs_multiple_lines.css and latest Firefox. On youtube I noticed having multiple tab rows will change the layout width of the right side of the page. Generally the more rows you have the narrower it gets from the right. Different zoom levels + multiple rows makes the width alter differently as well. I'll post screenshots to show what I mean.

After 6 rows the width doesn't seem to change anymore. This probably happens on other sites too. Is there a way to keep multiple rows from affecting the page layout?

[Aris-t2]

This is default behavior and happens with all browsers. The vertically available space changes sizes and spaces of Youtubes web content. Other sites do this too. Just test with only one tab by changing the size of you browsers window.

test.mp4

[bottleblue]

Is there a way to make the page layout fixed? I understand it's default behavior but most people don't use multiple row tabs so they never notice this. This becomes more of an issue for us that do.

[diegobersanetti]

Hi all,

first of all thanks to the authors of this tweak! I wanted to report a problem, which is that one cannot move pinned tabs in the second row, since as soon as I start to drag a tab the "destination" space is always on the first row.

[yurikhan]

That’s by design in Firefox. You can’t pin a tab in the middle of a single-row tab bar, either.

[arcanetrivia]

Pinned or unpinned, unfortunately this is just how it is. Firefox doesn't really support multirow tabs at all (hasn't for quite some time) and CustomCSS can only kinda-sorta make it work.

[rulon]

broken in ff 131.
downgrade to 130b9 restore

[myname1614]

Created new profile.
Downloaded 4.5.8.
Added many tabs.
Not working:

my settings:

$ cat userChrome.css | grep -P '^@import'
@import "./config/general_variables.css"; /**/
@import "./config/color_variables.css"; /**/
@import "./css/buttons/icons_colorized.css"; /**/
@import "./css/buttons/buttons_on_navbar_classic_appearance.css"; /**/
@import "./css/buttons/buttons_on_navbar_more_compact_mode.css"; /**/      
@import "./css/buttons/bookmarks_menu_button_localized_label_on_bookmarks_toolbar.css"; /**/
@import "./css/buttons/whatnew_button_always_hidden.css"; /**/
@import "./css/appbutton/appbutton_popup_icons.css"; /**/
@import "./css/appbutton/appbutton_popup_icons_colorized.css"; /**/
@import "./css/appbutton/appbutton_on_navbar_start_position.css"; /**/
@import "./css/appbutton/appbutton_in_titlebar_icon_only.css"; /**/
@import "./css/appbutton/appbutton_in_titlebar_autocolor.css"; /**/
@import "./css/tabs/classic_squared_tabs.css"; /**/
@import "./css/tabs/tabs_below_navigation_toolbar_alt.css"; /**/
@import "./css/tabs/missing_tab_favicon_restored_default.css"; /**/
@import "./css/tabs/tab_close_always_visible.css"; /**/
@import "./css/tabs/tab_icon_colors.css"; /**/
@import "./css/generalui/private_mode_indicator_hidden.css"; /**/
@import "./css/generalui/bookmark_icons_colorized.css"; /**/
@import "./css/generalui/context_bfrsb_labels_without_icons.css"; /**/
@import "./css/generalui/searchbar_glassplus_indicator_hidden.css"; /**/
@import "./css/toolbars/toolbars_old_padding.css"; /**/
@import "./css/toolbars/tabs_toolbar_adjustments.css"; /**/
@import "./css/toolbars/searchbar_on_menubar_fix.css"; /**/
@import "./css/toolbars/bookmarks_toolbar_old_height.css"; /**/
@import "./css/toolbars/general_toolbar_colors.css"; /**/
@import "./css/locationbar/ac_popup_result_font_size.css"; /**/
@import "./css/locationbar/megabar_expanding_breakout_disabled.css"; /**/
@import "./css/locationbar/urlbar_restore_visible_border.css"; /**/
@import "./css/locationbar/ac_popup_megabar_title_and_url_50percent_width.css"; /**/
@import "./css/locationbar/ac_popup_megabar_compact_results.css"; /**/

Same on old FF

[MrOtherGuy]

Your grepped results suggest that you are not importing tabs_multiple_lines.css at all.

[Aris-t2]

What MrOtherGuy said... :-)

[myname1614]

Indeed. Thanks. I found my old comments where I included this in my_userChrome.css.
I fixed something a long time ago and forgot.
Here is based on some old revision of:
https://github.com/MrOtherGuy/firefox-csshacks/blob/master/chrome/multi-row_tabs.css

I will return the original code.

[myname1614]

Thanks guys! Everything worked as expected
updated ff to 132.0b3

[nykoo]

update v4.5.7 perfectly fixed multirow tabs problem with firefox 131, thank you @MrOtherGuy and @Aris-t2 :)

[arcanetrivia]

This fix seems to also have had the side effect of fixing a problem I'd been having for quite some time where the tabs were somehow 1-2 px taller than the vertical space they were supposed to fit in under the bookmarks toolbar, so it was possible to slightly scroll vertically up and down if I hovered over the line of tabs and I'd often trigger it by accident. Now it doesn't do that. 👍

[HubbTain]

Hello
Since the update I can't get the focus/jump on the active tab. This is very annoying when you have a lot of tab rows.
Is there a solution please?
Thanks in advance

[Aris-t2]

I think we need a bit more information here.

Which update Firefox or this projects files?
With version/combination did work / does not work?

Vanilla setup of this projects files + tabs_multiple_lines.css works for me in Fx 132 and 133 beta.

Working examples:
Up to Fx 134: tabs_multiple_lines.css, if used default tabs on top.
Fx132: tabs_multiple_lines.css + tabs_below_navigation_toolbar_alt.css
Fx133+: tabs_multiple_lines.css + tabs_below_navigation_toolbar_fx133.css

[HubbTain]

Ok sorry
I've customized my userchrome.css a lot and for years...
Since upgrading to version 132, I've made the small changes to have multiple row again but now I'm forced to scroll until I find the active tab. And that's not very practical if you have dozens... of row.
I've searched and tested but still haven't found a solution.
Is there a css rule or rules that can be used to restore this behavior ?

=> the cause of the problem are :
scrollbox[part="scrollbox"][orient="horizontal"] > slot {
...
flex-wrap: wrap; AND overflow-y: auto;
...
}

[Noexpert]

Hi,

is it possible to hide the space occupied by the (hidden) menu bar?
I want to get rid the the empty space at the top.
I've tried using current/css/toolbars/searchbar_on_menubar_fix.css, but it didn't make any difference.

I'm also using current/css/tabs/tabs_multiple_lines.css and current/css/tabs/tabs_below_navigation_toolbar.css.

Thanks

[Aris-t2]

Thy bar should show browsers caption buttons (min, max, close).

You can move the whole top box into the invisible area out of the window, if you like:

#navigator-toolbox {
  margin-top: -24px !important;
}

[Noexpert]

Thanks. It looks like the title bar needs to be visible, as it contains the min, max, close buttons.
I don't think there's a way to move those to the url bar.

[p1nkyy]

Hi, I'm still in v4.6.3, just would like to ask, does rearranging tabs in multiple tab lines still doesn't work as intended in v4.7.0? Thank you in advance.

[p1nkyy]

Question, does the CSS need to be enabled for your userchrome js script to work?

[TroudhuK]

You're welcome, "perfectly" I'm not sure (ex : dragging a link doesn't display the tab indicator, I will try to improve it maybe next week-end) but the tabs moving seems fixed.
The CSS is necessary to the multi-lines display, and the JS for the multi-lines behavior, so you need both, I don't know if it was your question? Because to strictly answer it, no I didn't look at the code of the CSS part to do the JS, these files are independent.

[p1nkyy]

Ah OK, because sometimes the drag & drop still behaves like the CSS, drag can only go to certain tabs, for example.
Maybe I will wait for further tweaks.

[TroudhuK]

The CSS doesn't manage the drag & drop, you mean like the default one broken when the multi-lines is activated in the CSS? Please tell me if you encounter some bugs (describe how to reproduce), but before, do you clear the startupCache folder from your profile? (on Windows: %localappdata%\Mozilla\Firefox\Profiles\<your_profile>\startupCache)

[p1nkyy]

How do I clear startupCache? Do I delete everything in the folder?

[TroudhuK]

Yes. https://github.com/Aris-t2/CustomJSforFx?tab=readme-ov-file#scriptstartup-cache-must-be-deleted-after-every-change

[p1nkyy]

ah so that's why. It started out OK then it gradually went back to the buggy behavior. I was so confused. Still won't go beyond the last 2-3 tabs on the end but it's a lot better already. I will observe and report back to you. Will record a screen capture next time there's a bug.

[TroudhuK]

Indicator display when links drag&drop to tabs is fixed in the last version: https://raw.githubusercontent.com/TroudhuK/userChromeJS/refs/heads/master/MultiRowTabLiteforFx.uc.js

[TroudhuK]

Same link, fixed for Firefox 140

[Onepamopa]

Does anyone have this issue on FF 141.0?

[nykoo]

Got same problem as @Onepamopa with last Firefox 141.0 and Last CustomCss v4.7.3.
Same with @simoncarne userchrome
same with original userchrome.css with @import "./css/tabs/tabs_multiple_lines.css"; // enable
same with original userchrome.css everything disable excepted @import "./css/tabs/tabs_multiple_lines.css"; //
Maybe have something linked with this issue #769 (comment)

hope this will help @Aris-t2

[MarvinFS]

I have the same issue with stock FF141 (and Floorp, which is based on 141)
I was not able to find a solution with any possible CSS changes I could've imagined. It seems like pinned tabs are located on a separate individual tabs bar now, which is independent of main normal non-pinneds tabs bar. I haven't found mentions of that in FF141 changelogs.

it looks pretty much ridiculous now. that's clean test on cleanly installed browsers on a VM. with latest Custom CSS tweaks for Firefox v4.7.4

I have tried different sorcery - nothing worked - no changes

/* Remove dynamic padding for pinned area to integrate them into scrollable flow */
.arrowscrollbox-scrollbox {
  padding-left: 0 !important;
}

/* Force pinned tabs inline with regular, small size, scrollable */
.tabbrowser-tab[pinned] {
  position: static !important;  /* Override fixed positioning for flow and scrolling */
  max-width: 32px !important;   /* Standard pinned size */
  min-width: 32px !important;
  height: var(--tab-min-height) !important;  /* Match from general_variables.css (29px default) */
}

/* Force vertical scroll on the whole tab scrollbox for integrated pinned */
.arrowscrollbox-scrollbox {
  overflow-y: auto !important;  /* Enables scrolling for excess rows, including pinned */
}

in default floorp with minimal CSS additions it looks like that

and FF141 with the same minimal config

/* SET GLOBAL VARIABLES *********************/
@import "./config/general_variables.css";

/* COLOR VARIABLES FOR DEFAULT BROWSER THEME ONLY - MAIN UI - **/
@import "./config/color_variables.css";

/* TAB BACKGROUND COLORS for default/active/hovered/unloaded tabs and 'new tab' tab **/
@import "./config/custom_tab_color_settings.css";

/* TAB TEXT colors/shadow/weight/style for default/active/hovered/unloaded tabs *******/
@import "./config/custom_tab_text_settings.css";

/* SQUARED TABS *****************************/
@import "./css/tabs/classic_squared_tabs.css";

/* TABS BELOW NAVIGATION AND BOOKMARKS TOOLBARS *****************************/
@import "./css/tabs/tabs_below_navigation_toolbar_fx133.css";

/* MULTIROW ***********************************************************/
@import "./css/tabs/tabs_multiple_lines.css";

/* TAB CLOSE ICON settings *******************************************/
@import "./css/tabs/tab_close_always_visible.css";

/* SEARCHBAR - ADD NAMES OF SEARCH ENGINES ***********************/
@import "./css/generalui/searchbar_popup_engines_show_labels.css"

[MarvinFS]

and here is FF140.04 with the same config - expected behavior

[nykoo]

Got same problem as @Onepamopa with last Firefox 141.0 and Last CustomCss v4.7.3. Same with @simoncarne userchrome same with original userchrome.css with @import "./css/tabs/tabs_multiple_lines.css"; // enable same with original userchrome.css everything disable excepted @import "./css/tabs/tabs_multiple_lines.css"; // Maybe have something linked with this issue #769 (comment)

hope this will help @Aris-t2

For now i have downgraded to Firefox 140.1.0esr (64 bits) and disable auto-update, this temporary resolve the issue... for now :)

[Aris-t2]

There is no proper solution for this yet. Both tabs and pinned tabs are now part of different scrollboxes.

You can either give pinned tabs a fixed width and the become scrollable too or move pinned tabs into an own line.
Both solutions are kind of fishy. The first one might be fine for a few pinned tabs, the second one for many pinned tabs.

/* fixed width for pinned tabs */

#pinned-tabs-container {
  width: 60px !important;
}

/* move pinned tabs into an own line above normal tabs */

#tabbrowser-tabs[orient="horizontal"]:has(#pinned-tabs-container:not(:empty)) {
  padding-top: var(--tab-min-height_mlt) !important;
}

#pinned-tabs-container:not(:empty) {
  position: absolute !important;
  top: var(--tab-min-height_mlt) !important;
}

#toolbar-menubar[autohide="true"][inactive="true"] + #TabsToolbar #pinned-tabs-container:not(:empty) {
  position: absolute !important;
  top: 0 !important;
}

[MrOtherGuy]

There is a solution to the two scrollboxes actually, see example. Essentially just set display: contents to both scrollboxes so they don't generate their own layout boxes and instead all children are in #tabbrowser-tabs.

Obviously that removes all scrollbox behavior so I don't know if this would work in your multi-row-tabs, but at least in the case of my style, that isn't a problem since with multi-row tabs we don't really even want any of that. This might break horribly on ESR 128, but that's soon to be deprecated anyway.

[MarvinFS]

@Aris-t2 is it possible to ask to adapt @MrOtherGuy solution to CustomCSSforFx set? (maybe as alternative...) I personally think a separate line for pinned is also viable for some cases

[Aris-t2]

@MrOtherGuy
Thanks.

@MarvinFS
I will look into it.

[TroudhuK]

@Aris-t2
The drop indicator is now broken (classic or not).

Edit : As I don't use pinned tabs, I stay on the old tabs_multiple_lines_fx128-140.css which fixes all my new bugs.

[arcanetrivia]

I think the fix in 4.7.5 for the pinned tabs leaving a space underneath them when the tab bar breaks onto the next row is having a bad interaction with the bookmarks toolbar if that is above the tabs. If a folder on the toolbar has enough bookmarks in it that it is longer than the height of the screen and you have to scroll, you now can't get at the top ones. (There should be 13 other items before what is shown at the beginning of this screenshot.)

I can't scroll at all if my mouse pointer is in the area of the top two items. If I hover further down, when I scroll, the list jumps back and forth. While I can usually (after quite some frustration) eventually see the bookmarks at the top of the list, if I then move the mouse at all, the list jumps back to the bottom.

If I try to move through the list with the arrow keys, I don't see the jerking back and forth, but the highlight bar indicating the active item moves off the top of the list into someplace invisible. I actually can interact with stuff up there, but I can't see what I'm doing:

eta: Confirmed that this does not occur in a browser where I still have 4.7.4 installed. Those long folders of bookmarks behave normally.