SOLVED-FF57: Increase number of tab toolbar lines???

[Flycaster]

I have moved the tab toolbar to below the bookmark toolbar. I would like to be able to increase the number of tab toolbar lines so that I don't have to scroll to see hidden tabs on the single existing toolbar line.

[smsmith]

See these examples from Aris:

https://github.com/Aris-t2/CustomCSSfor ... _lines.css
https://github.com/Aris-t2/CustomCSSfor ... nes_v2.css

[Flycaster]

Neither of the codes worked. I copied each code and tested them separately. However, I did find this one that worked. As i really don't know much abut "codes," I just copied the whole code into my userChrome.css file. Does one need the whole code, or is there just a part of it that would work? Also, the only minor glitch was that moving a tab (place cursor on tab, hold left click and drag to a new place on the tab toolbar). Tabs couldn't always be moved to where you wanted them. None could be moved from from first to second line. Some could be moved along its line, but only up to a certain point. So far, I guess I can live with this until a better code comes out.

Code: Select all

/* MULTI-ROW TABS 
   based on https://www.reddit.com/r/FirefoxCSS/comments/7dclp7/multirow_tabs_in_ff57/ 
   If tabs are too narrow, go into about:config and adjust browser.tabs.tabMinWidth
*/

/* General Rules */
#tabbrowser-tabs .arrowscrollbox-scrollbox {
  overflow: visible; 
  display: block;
}
#tabbrowser-tabs .scrollbox-innerbox {
  display: flex;
  flex-wrap: wrap;
  min-height: var(--tab-min-height);
  max-height: calc((5 * var(--tab-min-height)) + 1px) !important; /* up to 5 rows */
}
.tabbrowser-tab, .tab-background {
  height: var(--tab-min-height);
}
.tab-stack {
  width: 100%;
}
#main-window[sizemode="normal"] #TabsToolbar {
  border-left: 1px solid #888 !important;
}
/* Title bar rules */
#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;
}
#titlebar:active {
  margin-bottom: 0 !important;
}
#titlebar:active #titlebar-content {
  margin-bottom: var(--tab-min-height) !important;
}
/* Remove unnecessary buttons and the blank areas at left and right */
#tabbrowser-tabs .scrollbutton-up, #tabbrowser-tabs .scrollbutton-down, 
#alltabs-button, .tabbrowser-tab:not([fadein]), 
.titlebar-placeholder[type="pre-tabs"], 
.titlebar-placeholder[type="post-tabs"] {
  display: none;
}
/* Ensure a border between tabs (#aaa is a light gray) */
.tabbrowser-tab:not(:last-of-type) {
  border-right: 1px solid #aaa !important;
}