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).

  • MrOtherGuy@lemmy.world
    link
    fedilink
    English
    arrow-up
    2
    ·
    1 year ago

    It’s not super tricky to just make tabs flow vertically. This can bee done pretty easily

    But behavior is where things start to fall apart. For starters, tabs can’t be dragged to reorder them (well they can, it just doesn’t work). And you can’t do any kind of tree like layout so it’s just a flat vertical list.

    If Vertical tabs is your thing, extensions just do it much better.

      • MrOtherGuy@lemmy.world
        link
        fedilink
        English
        arrow-up
        2
        ·
        1 year ago

        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.

      • MrOtherGuy@lemmy.world
        link
        fedilink
        English
        arrow-up
        2
        ·
        1 year ago

        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 used display: -webkit-box with its equivalent properties to make it vertical

  • MüThyme@lemmy.world
    link
    fedilink
    English
    arrow-up
    1
    ·
    1 year ago

    If you’re trying to modify the original tabs, my understanding is that you can’t which is why TST has to have both.

    Take that with a grain of salt though, I just vaguely remember looking this up years ago when I started using TST.