Multi row tabs - adamhotep/Firefox-Tweaks GitHub Wiki

This does not facilitate perfect functionality the way the Tab Mix Plus add-on did before Firefox 57 (Firefox Quantum) prevented it, but it's still workable.

Note the caveats below!

Code:

:root {
  --tabs-lines: 3; /* 3 rows, increase for more */
  --tab_min_width_mlt: 80px;
  --tab_max_width_mlt: 200px;
  --tab-min-height_mlt: var(--tab-min-height,32px);
}

.tabbrowser-tab[fadein]:not([pinned]) {
  flex-grow: 1;
  min-width: var(--tab_min_width_mlt) !important;
  max-width: var(--tab_max_width_mlt) !important;
}

.tabbrowser-tab,.tab-background {
  /* min-height: var(--tab-min-height_mlt); */
  height: var(--tab-min-height_mlt) !important;
}

.tab-stack {
  width: 100%;
}

#tabbrowser-tabs .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap;
  overflow-x: collapse !important;
  overflow-y: auto !important;
  min-height: var(--tab-min-height_mlt);
  max-height: calc( var(--tabs-lines) * var(--tab-min-height_mlt) ) !important;
}

#tabbrowser-tabs .arrowscrollbox-scrollbox {
  overflow-x: collapse;
  overflow: visible; 
  display: block;
}

#tabbrowser-tabs .scrollbutton-up,
#tabbrowser-tabs .scrollbutton-down,
#TabsToolbar #alltabs-button,
.tabbrowser-tab:not([fadein]){
  display: none;
}

#main-window[tabsintitlebar] #tabbrowser-tabs {
  -moz-window-dragging: no-drag !important;
}

.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-start-indicator:not([collapsed]),
.tabbrowser-arrowscrollbox > .arrowscrollbox-overflow-end-indicator:not([collapsed]) {
  opacity: 0 !important;
}

Caveats:

Dragging in the multi-row tab area will affect a random row (the leftmost will be topmost and the rightmost will be bottommost, but other locations will be only vaguely accurate)
There is a large space below the bottom row, so the scroll bar looks odd
Don't put a button (like "new tab" or "containers") on the tab bar or it'll look ugly
The scroll wheel doesn't do anything