Multiple Row Tabs

WildEnte

@JumpingLawnChair and apart from what @barbudo2005 said starting with the latest snapshot you can also use workspaces without having to turn on experimental features. Yey!

https://vivaldi.com/blog/desktop/workspaces-vivaldi-browser-snapshot-2970-3/

barbudo2005

@JumpingLawnChair

Even better. Get into the habit that every time you name a tab stack you add a New tab, so that you are sure the name will stick.

You can write a Command Chain to do that automatically.

JumpingLawnChair

@barbudo2005
Yes, that is what I am doing now. I want to not need the extra tab open as I have a lot of tabs open already.

@WildEnte
Thanks! I just saw that new experimental feature, and even thought of mentioning it here. Yes, that will have huge implications for us tab organizers. I have not looked at it yet. It sounds exciting! Looking forward to it coming out of beta.

TheAMan006

Waiting for multi-rows...

iAN CooG

@TheAMan006 don't hold your breath

BloodyElf

Nobody uses Multiple Row Tabs? Does it work fine on the current version of Vivaldi? Is there a new version somewhere?

barbudo2005

@BloodyElf

Fine. Multiple row tabs AND Multiple row "two level" tab stack:

Hababr

UPDATE: New version is here: https://forum.vivaldi.net/topic/101084/css-mod-multi-row-tabs-and-more

Here is the version I use, width of the tabs at the top and inside the stack can be configured separately.

Update 2024-03-09: Updated for Vivaldi 6.6
Update 2024-08-28: Updated for Vivaldi 6.9.3447.34 (Snapshot)

/*
  Multiple Row Tabs - Created by @hababr. Version 2024.09.05.
  Base on work of and inspired by @nomadic, @fpdragon, @potmeklecbohdan, @alexander.gorbovets, @barbudo2005.
*/

/* Configuration */
:root {
  /* That will be the minimum width of a tab. You can adjust the number as you like. */
  --mrt-min-width: 82px;
}
#tabs-subcontainer {
  --mrt-min-width: 102px;
}
.tab-strip.horizontal-scrolling {
  /* That will be the tab width is case Horizontal Scrolling is enabled. */
  --mrt-hs-width: 50px;
}

/* Changes to allow multi row tab bar */
#browser:is(.tabs-top, .tabs-bottom) #tabs-tabbar-container {
  height: auto !important;
}

/* Fix overflow issue on secondary bar */
#browser:is(.tabs-top, .tabs-bottom) #tabs-subcontainer {
  flex-basis: unset !important;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-strip {
  display: flex;
  flex-wrap: wrap;
  row-gap: 1px;
  column-gap: 1px;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span,
#browser:is(.tabs-top, .tabs-bottom) .tab-strip > .tab-position {
  /*display: inline-block;*/
  display: flex;
  position: relative;
  height: 30px;
  --PositionX: 0px !important;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-position.tab-yield-space {
  --PositionX: 0px !important;
  height: 30px !important;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position {
  --PositionX: 0px !important;
  height: 30px !important;
}

/*#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position:is([style*="--Height: 150px;"]),*/
#browser:is(.tabs-top, .tabs-bottom) .tab-position.tab-yield-space:not(.is-pinned),
#browser:is(.tabs-top, .tabs-bottom) #tabs-subcontainer .tab-strip > span > .tab-position,
#browser:is(.tabs-top, .tabs-bottom) #tabs-container .tab-strip > span > .tab-position:not(.is-pinned) {
  --Width2: var(--mrt-hs-width, var(--Width));
  min-width: min(var(--mrt-min-width), var(--Width2)*99999) !important;
  width: var(--Width2);  
}

#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position,
.toolbar-tabbar > .newtab {
  position: static !important;
}

/* Keep title visible on tabs */
#browser:is(.tabs-top, .tabs-bottom) .tab.tab-small .tab-header .title {
  display: flex !important;
}

/* Keep tab stack counter visible  */
#browser:is(.tabs-top, .tabs-bottom) .tab-position .tab.tab-small .stack-counter {
  display: block !important;
}

/* Keep tab header style */
#browser:is(.tabs-top, .tabs-bottom) .tab.tab-small.tab-mini .tab-header,
#browser:is(.tabs-top, .tabs-bottom) .tab.pinned.tab-mini .tab-header {
  padding-left: 6px !important;
  border: none !important;
  justify-content: normal !important;
}

/* Fix width for tab stack border when selected */
#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position:not([style*="--Width: 0px"]) .tab {
  --Width2: max(100%, var(--mrt-min-width));
  max-width: var(--Width2);
  max-height: calc(100% + 1px);
}
/*#browser:is(.tabs-top, .tabs-bottom) .tab-position:not(.is-substack) .svg-tab-stack, .tabs-top .svg-tab-selection {*/
#browser:is(.tabs-top, .tabs-bottom) .tab-position:not(.is-pinned) .svg-tab-stack,
#browser:is(.tabs-top, .tabs-bottom) .tab-position:not(.is-pinned) .tab-header,
.tabs-top .svg-tab-selection {
  width: calc(var(--Width2) + 0px) !important;
  max-width: var(--Width2) !important;
}

#browser:not(.alt-tabs, .tabs-left, .tabs-right) .tab-position .tab:hover.tab-small.active .favicon {
  flex-shrink: 0 !important;
}

/* When tab scrolling is enabled */
.horizontal-scroll-arrow {
  padding: 0 !important;
}

#tabs-container .resize > .toolbar.toolbar-tabbar,
#tabs-subcontainer > .toolbar.toolbar-tabbar {
    flex-shrink: 0;
}

/* Fix tabs popup closes when mouse is over empty area */
#browser:is(.tabs-top, .tabs-bottom) .tab-strip > .toolbar {
  flex-grow: 1;
}

/* Hide the icon of pinned tab stacks */
.is-substack.is-pinned span.favicon,
.is-substack.is-pinned .stack-counter {
    display: none !important;
}
.is-substack.is-pinned .tab-header {
    padding-left: 2px;
}

BloodyElf

@barbudo2005
Please tell me which version are you using? And how did you make some tab stacks of different colors?

@Hababr said in Multiple Row Tabs:

Here is the version I use, width of the tabs at the top and inside the stack can be configured separately.

Thank you. I was only able to check it now. But for some reason this doesn’t work for me on version Vivaldi 6.4. To make this work, do I need to change any settings other than enabling css?

barbudo2005

@BloodyElf

I use this code:

/* MULTILINE TABS Gorsash  https://gist.github.com/gorsash/0d4de703a84c620c7280830aba582758*/


#tabs-tabbar-container

{height: auto !important;
margin-top: 1px !important;
margin-bottom: 1px !important;}


.resize

{display: block !important;}
	
.tab-strip {display: block;}
	
.tab-strip > span {display: inline-block;}
	
.tab-strip > span > .tab-position

{left: 0px !important;
position: relative;
height: 32px !important; 
width: auto !important;}
	
.tab-strip > span > .tab-position   > .tab:not(.pinned)
 
{width: 149px !important;
margin-right: 2px !important;
margin-left: 2px !important;}


.tab-strip > span > .tab-position > .tab.pinned

{width: 149px !important; 
margin-right: 2px !important;
margin-left: 2px !important;}


	
.tab-strip > .newtab
 
 {left: 1px !important;
margin-right: 1px !important;
margin-left: 1px !important;
top: 0px !important;
position: relative !important;
display: inline-block;
padding: 0;
vertical-align: top;}

.tab-header > .favicon > svg

{height: 17px;
padding-left: 2px;}

.tab-header  .tab.uifocusstop.insubstrip
{padding-left: 2px !important;
padding-right: 2px !important;}

.tab-strip > .toolbar.toolbar-tabbar  {display: inline-flex;}

/*SECOND LEVEL STACK*/


 .tab-position
 {--PositionX: 0px  !important;}
  
 .tab-position.tab-yield-space

 {--PositionX: 0px !important;
 margin-bottom: 2px !important;
 }
  
 
  
/* MULTILINE SECOND LEVEL */


#tabs-subcontainer.top.visible
{flex-basis: unset !important; 
min-height: 34px !important; 
margin-left: 5px !important;}


.tab-position  [id*= "tab"].tab.insubstrip

{height: 32px !important; 
margin-top: 2px !important;
margin-bottom: 2px !important;}

For color the tab stack look this post:

https://forum.vivaldi.net/topic/76205/automatic-color-for-active-tabs-active-tab-stacks-using-favicon?_=1654620418289

Hababr

@BloodyElf said in Multiple Row Tabs:

Thank you. I was only able to check it now. But for some reason this doesn’t work for me on version Vivaldi 6.4. To make this work, do I need to change any settings other than enabling css?

What exactly does not work? You don't see changes at all? I use the latest stable version, tabs should be at the top/bottom, other settings do not affect anything.

BloodyElf

@barbudo2005
Thank you!

@Hababr said in Multiple Row Tabs:

What exactly does not work? You don't see changes at all?

I'm sorry. That's my fault. I used a space in the css file name.
Now it works, thanks!

CalebM

Somebody directed me to this page because I want multiple tab rows in Vivaldi (I have version 6.5.3206.59). However, I'm technically challenged, and I can't figure out where to insert that code to get the rows. Some configuration file, I assume? Thanks.

quivenda

@Hababr said in Multiple Row Tabs:

Here is the version I use, width of the tabs at the top and inside the stack can be configured separately.

/*
  Multiple Row Tabs - Created by @hababr. Version 2023.10.31.
  Base on work of and inspired by @nomadic, @fpdragon, @potmeklecbohdan, @alexander.gorbovets, @barbudo2005.
*/

/* Configuration */
:root {
  /* That will be the minimum width of a tab. You can adjust the number as you like. */
  --mrt-min-width: 82px;
}
#tabs-subcontainer {
  --mrt-min-width: 102px;
}
.tab-strip.horizontal-scrolling {
  /* That will be the tab width is case Horizontal Scrolling is enabled. */
  --mrt-hs-width: 50px;
}

/* Changes to allow multi row tab bar */
#browser:is(.tabs-top, .tabs-bottom) #tabs-tabbar-container {
  height: auto !important;
}

/* Fix overflow issue on secondary bar */
#browser:is(.tabs-top, .tabs-bottom) #tabs-subcontainer {
  flex-basis: unset !important;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-strip {
  display: flex;
  flex-wrap: wrap;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span,
#browser:is(.tabs-top, .tabs-bottom) .tab-strip > .tab-position {
  /*display: inline-block;*/
  display: flex;
  position: relative;
  height: 30px;
  --PositionX: 0px !important;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-position.tab-yield-space {
  --PositionX: 0px !important;
  height: 30px !important;
}

#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position {
  --PositionX: 0px !important;
  height: 30px !important;
}

/*#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position:is([style*="--Height: 150px;"]),*/
#browser:is(.tabs-top, .tabs-bottom)     .tab-position.tab-yield-space:is(:not([style*="--Width: 31px;"]), :not([style*="--ZIndex: 2;"])),
#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position:is(:not([style*="--Width: 31px;"]), :not([style*="--ZIndex: 2;"])) {
  --Width2: var(--mrt-hs-width, var(--Width));
  min-width: min(var(--mrt-min-width), var(--Width2)*99999) !important;
  width: var(--Width2);  
}

#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position,
.toolbar-tabbar > .newtab {
  position: static !important;
}

/* Keep title visible on tabs */
#browser:is(.tabs-top, .tabs-bottom) .tab.tab-small .tab-header .title {
  display: flex !important;
}

/* Keep tab stack counter visible  */
#browser:is(.tabs-top, .tabs-bottom) .tab-position .tab.tab-small .stack-counter {
  display: block !important;
}

/* Keep tab header style */
#browser:is(.tabs-top, .tabs-bottom) .tab.tab-small.tab-mini .tab-header,
#browser:is(.tabs-top, .tabs-bottom) .tab.pinned.tab-mini .tab-header {
  padding-left: 6px !important;
  border: none !important;
  justify-content: normal !important;
}

/* Fix width for tab stack border when selected */
#browser:is(.tabs-top, .tabs-bottom) .tab-strip > span > .tab-position:not([style*="--Width: 0px"]) .tab {
  --Width2: max(100%, var(--mrt-min-width));
}
/*#browser:is(.tabs-top, .tabs-bottom) .tab-position:not(.is-substack) .svg-tab-stack, .tabs-top .svg-tab-selection {*/
#browser:is(.tabs-top, .tabs-bottom) .svg-tab-stack, .tabs-top .svg-tab-selection {
  width: calc(var(--Width2) + 0px) !important;
}

#browser:not(.alt-tabs, .tabs-left, .tabs-right) .tab-position .tab:hover.tab-small.active .favicon {
  flex-shrink: 0 !important;
}

/* When tab scrolling is enabled */
.horizontal-scroll-arrow {
  padding: 0 !important;
}

#tabs-container .resize > .toolbar.toolbar-tabbar,
#tabs-subcontainer > .toolbar.toolbar-tabbar {
    flex-shrink: 0;
}

This code affected the pinned tab when it was inactive. How can this code not affect the pinned tab when it was inactive? Thanks.

Hababr

@quivenda said in Multiple Row Tabs:

This code affected the pinned tab when it was inactive. How can this code not affect the pinned tab when it was inactive? Thanks.

I use newer version of the styles. I updated the code in my post.

quivenda

@Hababr said in Multiple Row Tabs:

I use newer version of the styles. I updated the code in my post.

Thanks! it's perfect now.

lkarabasl

@Hababr
Hello, could you provide a link to this file of yours for Vivaldi and please write for which version it works and where to insert it, I don’t understand anything about it.
Thank you in advance!

Hababr

@lkarabasl Save the css code from my post into a file. And follow instructions under 'Adding Style (CSS)' from here.

barbudo2005

With the last update 6.8.3381.44 the tab bar looks like this:

It appears that this code is the cause of the increased height:

#tabs-tabbar-container

{height: auto !important;
margin-top: 1px !important;
margin-bottom: 1px !important;}

Is anyone having the same problem?

fjelsten

@barbudo2005 Yes. I hope someone has knowledge to fix it.