Accordion Tab Stack Title while expanded

[steve8track]

I just recently tried the accordion setting for my vertical tabs. I like it, but I wish expanded stacks had an option to always show the stack name.

Right now it just puts a box around the tabs and you can't see the name unless you collapse the title.

I've inspected the dom, and the title isn't there when expanded, otherwise I would show it using css.

Kinda like this:

[Pesala]

@steve8track If you use the option:

• Accordion
  
  Auto-expand

The stack name will be displayed unless the stack has focus. In my opinion, if the stack has focus then one needs to see the name of each tab, not the name of the whole stack.

Tabs on Top

Expanded

Collapsed

Tabs on Left

Expanded

Collapsed

[dude99]

Another problem u will face when using accordion tab stack in vertical tabbar is you can't minimized active stack easily if there are more than 20 tabs inside the stack, because the minimize button is buried at the very bottom of the stack which usually hidden outside of the window. That's one of the big reason I only tested accordion style tab stack for a few days & never go back to it...

---

@Pesala said in Accordion Tab Stack Title while expanded:

In my opinion, if the stack has focus then one needs to see the name of each tab, not the name of the whole stack.

It depend on how one utilize the tab stack feature, some use it as separator/organizer to keep different category of tabs as group, like work, social, news, sport...etc. Thus, the stack name could be important even when it's an active stack. And it's especially important for those who like to rename all the stack to keep 'em easy to recognize in plainview.

[Pesala]

@dude99 How is that going to work if an accordion tab stack is expanded? Will each tab have the tab stack name?

A Tab Bar showing Work • Work • Work • Work • Work is like a horror story.

[dude99]

@Pesala Pls look at the OP's screenshot, one line of tab stack name (Work) follow by it's tabs, then the same for other stack. It's a pretty clear illustration to understand, I apologies if my overly complicated description have confused u.

[shifte]

@dude99 @Pesala

I think the below is more easier to use.

[dude99]

@shifte Have the same idea since the beginning when I test drive accordion: https://forum.vivaldi.net/post/510063

But unfortunately v team never pick up this feedback & ideas for vertical tabbar. I did try to use CSS mod to anchor the expand/minimize button to the side but I think I abandoned the effort when I realized the Accordion style for Vertical tabbar CSS layout is very flawed & a total mess, not really worth the trouble to try fixing it... LOL

[steve8track]

@shifte Another idea is to put it by the stack name:

[shifte]

@dude99 said in Are you a tab hoarder? Try Accordion Tabs in Vivaldi:

2. Reduce Tab Stack Button should be on the left/right side with max-height of expanded stacked tab. Currently if you have stack of 30+ tabs you will have difficulty collapsing expanded stack tabs via the Reduce tab stack button, because the button might be hidden off-screen at the very bottom of the stack like this:

You saw the scenaly one year ago, I see the same scenaly now. 　LOL
I will try this idea when I feel like it.

[steve8track]

@Pesala Yes, I use Auto-expand currently

[shifte]

@dude99
Impossible!
beyond my tiny capacity...

[steve8track]

@shifte I agree. They appear to calculate the tab placement and sizes using javascript, making any CSS tweaking/customization very difficult to say the least.

[steve8track]

This CSS overlays the first tab id on the stack:

  div#tabs-container div.tab-first-in-group::before {
    content: attr(id); /* could use var() */
    position: absolute;
    z-index: 3;
    background-color: white;
    color: black;
    right: 0px;
  }

I don't see the stack name anywhere while expanded to be able to populate that with.

I am able to make the stacks a bit more obvious by using a brighter color in the frame:

.svg-tab-stack .stack-frame {
  stroke: #00ffc2;
}

#browser.color-behind-tabs-on .tab-position .tab.active.active {
  background-color: #227955;
}