Multi Row Tabs in Firefox Quantum

The Tab Mix Plus addon stopped working with v57 :-(

  1. [this may not be needed] Open the developer toolbar (firefox menu -> Web Developer -> Developer Toolbar) and click settings (gear icon). Check “Enable browser chrome and add-on debugging toolboxes” under “Advanced Settings”.
  2. Open a new tab on about:support
  3. Click the button next to “Profile Folder”
  4. Go to the “chrome” directory at the profile folder, or create it if it doesn’t exist.
  5. Create a file named “userChrome.css” (if it doesn’t exist) and open it in a text editor.
  6. Copy the css code from github.com/andreicristianpetcu/UserChrome-Tweaks
    (copy of the css is at the bottom of this post)
  7. Paste it into userChrome.css and save.
  8. Restart Firefox

Update for v58: Changed .tabbrowser-tabs to #tabbrowser-tabs.

userChrome.css

.tabbrowser-tab:not([pinned]) {
    flex-grow:1;
    min-width:150px;
}
.tabbrowser-tab,.tab-background {
    height:var(--tab-min-height);
}
.tab-stack {
    width: 100%;
}
#tabbrowser-tabs .scrollbox-innerbox {
    display: flex;
    flex-wrap: wrap;
}
#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;
}

Based on instructions here.