[Solved] [FF v131.0] URL bar not on top anymore

[SanderBouwhuis]

Hi @MrOtherGuy,

I have been using your scripts for many years now. Unfortunately, after updating to FF v131.0, the URL bar moved from the top to below the tabs. How can I fix this?

I have been using these two scripts for years now:

1. https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css
2. https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css

Here is a screenshot where you see the URL bar no longer on top, but below the tabs:

And here is my userChrome.css file:

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/multi-row_tabs.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Makes tabs to appear on multiple lines
 * Tab reordering will not work and can't be made to work
 * You can use multi-row_tabs_window_control_patch.css to move window controls to nav-bar
 * You might want to move tabs-new-tab-button outside tabs toolbar for smoother behavior */

/* SETTINGS (you need to create and set these prefs to true in about:config)
 * userchrome.multirowtabs.full-width-tabs.enabled  - make tabs grow horizontally to fill all available space
 * userchrome.multirowtabs.scrollbar-handle.enabled - make scrollbar in tabs box respond to mouse, makes it imposiible to drag window from empty space in tabs box */

:root{
  --multirow-n-rows: 5; /* change maximum number of rows before the rows will start to scroll */
  --multirow-tab-min-width: 100px;
  --multirow-tab-dynamic-width: 1; /* Change to 0 for fixed-width tabs using the above width. */
}

#tabbrowser-tabs{
  min-height: unset !important;
  padding-inline-start: 0px !important
}

@-moz-document url(chrome://browser/content/browser.xhtml){
  #scrollbutton-up~spacer,
  #scrollbutton-up,
  #scrollbutton-down{ display: var(--scrollbutton-display-model,initial) }

  scrollbox[part][orient="horizontal"] > slot,
  scrollbox[part][orient="horizontal"]{
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    overflow-y: auto;
    max-height: calc((var(--tab-min-height) + 2 * var(--tab-block-margin,0px)) * var(--multirow-n-rows));
    scrollbar-color: currentColor transparent;
    scrollbar-width: thin;
    scrollbar-gutter: stable;
    scroll-snap-type: y mandatory;
  }
  scrollbox[part][orient="horizontal"] > slot{
    overflow-x: hidden;
  }
}

.scrollbox-clip[orient="horizontal"],
#tabbrowser-arrowscrollbox{
  overflow: -moz-hidden-unscrollable;
  display: inline;
  --scrollbutton-display-model: none;
}

.tabbrowser-tab{ scroll-snap-align: start; }

#tabbrowser-tabs .tabbrowser-tab[pinned]{
  position: static !important;
  margin-inline-start: 0px !important;
}

.tabbrowser-tab[fadein]:not([pinned]){
  min-width: var(--multirow-tab-min-width) !important;
  flex-grow: var(--multirow-tab-dynamic-width) !important;
}

.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; }

#tabbrowser-tabs[hasadjacentnewtabbutton][overflow] > #tabbrowser-arrowscrollbox > #tabbrowser-arrowscrollbox-periphery > #tabs-newtab-button {
  display: flex !important;
}

#alltabs-button,
:root:not([customizing]) #TabsToolbar #new-tab-button,
#tabbrowser-arrowscrollbox > spacer,
.tabbrowser-tab::after{ display: none !important }

@media (-moz-bool-pref: "userchrome.multirowtabs.full-width-tabs.enabled"){
  .tabbrowser-tab[fadein]:not([pinned]){ max-width: 100vw !important; }
}
@media (-moz-bool-pref: "userchrome.multirowtabs.scrollbar-handle.enabled"){
  #tabbrowser-arrowscrollbox{ -moz-window-dragging: no-drag }

/* -----------------------------------------------------------------------------------------------------------------------------------------------*/

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/tabs_on_bottom.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* IMPORTANT
Get window_control_placeholder_support.css
Window controls will be all wrong without it.
Additionally on Linux, you may need to get:
linux_gtk_window_control_patch.css

Use tabs_on_bottom_menubar_on_top_patch.css if you
have menubar permanently enabled and want it on top 
*/

#toolbar-menubar[autohide="true"] > .titlebar-buttonbox-container,
#TabsToolbar > .titlebar-buttonbox-container{
  position: fixed;
  display: block;
  top: 0px;
  right:0;
  height: 40px;
}
@media (-moz-bool-pref: "userchrome.force-window-controls-on-left.enabled"),
       (-moz-gtk-csd-reversed-placement),
       (-moz-platform: macos){
  .titlebar-buttonbox-container{ left:0; right: unset !important; }
}

:root[uidensity="compact"] #TabsToolbar > .titlebar-buttonbox-container{ height: 32px }

#toolbar-menubar[inactive] > .titlebar-buttonbox-container{ opacity: 0 }

.titlebar-buttonbox-container > .titlebar-buttonbox{ height: 100%; }

#titlebar{
  order: 2;
  -moz-appearance: none !important;
  --tabs-navbar-shadow-size: 0px;
  --uc-menubar-vertical-overlap: 19px; /* for hide_tabs_with_one_tab_w_window_controls.css compatibility */
}
/* Re-order window and tab notification boxes */
#navigator-toolbox > div{ display: contents }
.global-notificationbox,
#tab-notification-deck{
  order: 2;
}

#TabsToolbar .titlebar-spacer{ display: none; }
/* Also hide the toolbox bottom border which isn't at bottom with this setup */
#navigator-toolbox::after{ display: none !important; }

@media (-moz-gtk-csd-close-button){
  .titlebar-button{
    flex-direction: column;
  }
}

/* At Activated Menubar */
:root:not([chromehidden~="menubar"], [sizemode="fullscreen"]) #toolbar-menubar:not([autohide="true"]) + #TabsToolbar > .titlebar-buttonbox-container {
  display: block !important;
}
#toolbar-menubar:not([autohide="true"]) > .titlebar-buttonbox-container {
  visibility: hidden;
}

/* These exist only for compatibility with autohide-tabstoolbar.css */
toolbox#navigator-toolbox > toolbar#nav-bar.browser-toolbar{ animation: none; }
#navigator-toolbox:hover #TabsToolbar{ animation: slidein ease-out 48ms 1 }
#TabsToolbar > .titlebar-buttonbox-container{ visibility: visible }
:root:not([lwtheme]) #navigator-toolbox{ background-color: -moz-dialog }

/* Uncomment the following if you want bookmarks toolbar to be below tabs */
/*
#PersonalToolbar{
  order: 2;
}
*/

[MrOtherGuy]

You are missing a closing bracket } at the end of you multi-row_tabs section - just before that whole /* -------------- separator. Just add that back and it will work.

[SanderBouwhuis]

Huh?!? Ooooooooooooh man... I'm so sorry! Apparently I copied it incorrectly from your script files. And, yes, it works now.

I love you!!!