Theoretically it should be possible to make child elements flow vertically instead of horizontally, by setting these properties on the parent: display: flex; flex-direction: column;. I tried that with a bunch of the tab elements and it didn’t work. The problem with addons like TST is that they glitch out sometimes, and you have to wait for the tabs to load, it takes much longer on my M1 Mac once I have 100s of tabs open (don’t judge me).
Oh shit, where did u find that photo? Could I see the CSS so I could try to figure it out?
So, like here is a bit more useful version. It’s no more “just a handful of lines” because I needed to add a few workarounds for some obvious issues. And it surely is still not great - probably the most annoying issue is that if it ever happens that Firefox thinks that the tabs would overflow then you will irrecoverably lose the ability to scroll the those vertical tabs using mouse wheel - until you restart Firefox. And also as I already mentioned you can’t reorder tabs. And probably a whole bunch of other issues as well.
Sure, I’ll link it to you later when I get home. It’s really just a handful of lines of CSS.
But I suppose the main issue why you haven’t got flex-direction to work is because the scrollbox has
orient="horizontal"attribute and elements matching that are styled to have flex-direction horizontal in agent stylesheet with important tag. You cannot override that with userChrome. Practically this means that you cannot use standard flexbox display model for that scrollbox. Instead, I useddisplay: -webkit-boxwith its equivalent properties to make it vertical