Vertical Tabs | Collapsed & Expand On-Hover

[sakaiyo]

Collapsing vertical tabs that expand on-hover (with and without floating tabs)

Preview:

Simple change that allows vertically stacked tabs to contract by default, showing only icons. Expands on hover, contracts when you stop hovering. Moving tabs while expanded works fine.
Make sure you lock the second tab row!

(Last Updated Feb 23, 2023)

CSS is simple:

#main .inner > div:has(#tabs-tabbar-container:is(.left, .right)):not(:hover),
#tabs-tabbar-container:not(:hover):is(.left, .right) {
  width: 60px !important;
  transition: width 0.25s !important;
}

If you aren't using stacked tabs, change width: 60px to width: 30px;
If you want improved performance or don't want the minimal animation of the tabs sliding closed, delete the line transition: width 0.25s !important;

Additionally, (mostly) floating option - recommended for performance improvement: if you want the expanded tabs to not take up space from the website's page (this feels smoother and helps performance, but while your tabs are expanded they cut off part of the browser page you're viewing), then use this CSS in addition to the above:

#main .inner > div:has(#tabs-tabbar-container:is(.left, .right)) {
  position: absolute;
  z-index: 2;
  opacity: 1;
  background-color: var(--colorBg);
  height: 100% !important;
}

#main
  .inner
  > div:has(#tabs-tabbar-container)
  #tabs-subcontainer:is(.left, .right)
  .toolbar
  .button-toolbar {
  position: static;
}

#main
  .inner
  > div:has(#tabs-tabbar-container):hover
  #tabs-subcontainer:is(.left, .right)
  .toolbar
  .button-toolbar {
  position: relative;
}

#tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover)
  > div.overflow
  .tab-strip {
  overflow-y: hidden;
}

#main:has(#tabs-tabbar-container.left) #panels-container {
  margin-left: 60px;
}

Change 60px to 30px if you're not using tab stacks.

Note the example picture also showcases some additional styling changes I have shared at https://forum.vivaldi.net/topic/82894/cleaner-vertical-stacked-tabs

--
ModEdit: Title

[dude99]

Hi, have you tested the tabbar on the right side with the floating code? AFAIK there is a bug with how Vivaldi handling position: absolute for right positioned tabbar, it might cause the webpage to anchor at the wrong x-position randomly. (v team have confirmed they won't fix this bug...)

The way I workaround it is using position: fixed; height: -webkit-fill-available !important; to emulate floating effect.

---

You should limit the code to just left & right tabbar with #tabs-tabbar-container:is(.left, .right) or .tabs-left .tabs-right in the beginning of related lines. Else it will break tabbar on top/bottom position.

---

Also, you might wanna add #tabs-tabbar-container:is(.left, .right):not(:focus-within):not(:hover) > div.overflow .tab-strip {overflow-y: hidden;} to hide the scrollbar when tabbar is minimized with too many tabs.

---

Then, you can play with will-change: width; on #tabs-tabbar-container to improve the redraw performance when there are many tabs. AFAIK width method of changing the tabbar width is very resources taxing, & it might cause extreme lag when there are too many tabs.

---

Another idea is you can do this to support dynamic minimized tabbar's width based on the appearance of #tabs-subcontainer:

#tabs-tabbar-container:is(.left, .right):not(:has(#tabs-subcontainer)):not(:hover) {width: 30px !important;}

#tabs-tabbar-container:is(.left, .right):has(#tabs-subcontainer):not(:hover) {width: 60px !important;}

---

I hope these tips can help you further improve your beautiful mod!

[sakaiyo]

Thanks for looking out @dude99, appreciate the tips! Will update with those CSS improvements for the scrollbar and left/right tabs soon. Right now it assumes you use left vertical tabs. It could be more flexible.

On bugs:
No noticeable browser bugs when using right-aligned tabs with this mod. If you notice something specific let me know. I did try position fixed but had issues with the z position defaulting to 0, overlapping the address bar / etc. Unable to repro it now though, may switch back to fixed if I notice any issues with absolute.

This mod does solve for a couple position absolute related issues though: 1) they overlap the entire website - which is undesirable here - unless you set a margin on #panels-container, and 2) the new tab button straying onto the website when collapsed, which we're able to handle by setting its position to relative when hovering.

On performance:
This is a neat area to dig into. CPU spikes with this mod when the user expands the tabs (with >50 tabs in a stack) are around the same % and duration as CPU spikes when you switch from one tab stack into another without any CSS mods, which is a good sign. (Though less intense CPU spikes with the vanilla tab stacks would be amazing.)

will-change: width is really interesting. Official docs make it sound like it's best enabled 1) only very briefly, then removed - usually managed in javascript, and 2) only used as a last resort if performance issues exist and aren't resolvable without it. We should be alright without it here, though let me know if there's a scenario not being accounted for.
If the user experiences performance issues related to tab widths, removing the transition CSS would help get this mod close to vanilla CSS from the perspective of how often tab widths are changing.

The real performance hit is if the user isn't using the floating option CSS. The website width changing whenever the user expands and contracts the tab leads to noticeable delays as the website's width changes, even with a good CPU. The floating option takes care of that - the website's width never changes when the user views the tabs thanks to the tabs expanding over the site (position absolute) instead of by taking width away from the site.

[dude99]

@sakaiyo U can also reduced the animation redraw by utilize steps(n), it will force Vivaldi to only redraw n amount of time throughout an animation for specific element, & thus less taxing on CPU.

I "think" we might need to apply this trick on both #tabs-tabbar-container & #webview-container to be able to force both of 'em to reduce redraw. I cant be sure of this now because my memory is kinda fuzzy since I got covid a few months ago... LOL

---

Oh, here is another snippet of code I used for vertical tabbar, it can improve redraw performance a tiny bit by cancel the display: block effect during transition from small tab to full width. You probably don't need the entire code, so just pick whatever you think is suitable for your mod:

/* fix small tab hover effect for title, stack counter */
#tabs-container .tab.tab-small.tab-mini .tab-header {justify-content: unset; padding-left: 5px;}
#tabs-container .tab.tab-small.tab-mini .tab-header .title {display: flex;}
#browser:not(.alt-tabs).substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:hover.tab:not(.button-off, .force-hover, .tab-small) .stack-counter, 
.substrip-tabs-on #tabs-tabbar-container:is(.left, .right) .tab-position .tab:not(.tab-mini) .stack-counter {display: block; margin-left: -6px;}

[dude99]

@sakaiyo
I think the first line of #main .inner > div:has(> #tabs-tabbar-container:is(.left, .right)):not(:hover), should be #main .inner > div:has(#tabs-tabbar-container.left):not(:hover),. Because the div is only a placeholder for left position tabbar, but it suppose to have 0 width for right position tabbar.

[rexxDZN]

i have tried using this mod however it seems to be broken. it doesn't work with the tabs set to the right. And the workspace panel seems to extend way past the rest when not hovered. also the pages seems to be under the tabs and panel now which means i can't click on anything that is beneath...

[OsoPolar]

Why is this not built into the browser very weird considering all the functionality Vivaldi has!
Edge and Brave have this it was very popular in Edge, shocked its not in here.
Anybody know if there is a option to ask the devs to add it ?

[OsoPolar]

How does one setup up this feature?
I am no javascript or css guru but really miss this functionality very weird its not an option.
Please provide a link or guide i can read to set this up if you have time

[OsoPolar]

@dude99 hi i am desperately looking for this functionality having just come from Edge and Brave which has this baked in.

As a semi noob what is the best CSS to achieve this i am using stacked tabs with bar on left i use workspaces as well.

I have added a custom folder just for css or do i need a javascript entry ?

I have added the code here

I have also enabled all experimental css but nothing works what am i doing wrong ?

/home/dale/repos/dotfiles/vivaldi-custom-css/custom.css

[AC0xRPFS001]

@rexxDZN said in Collapsing vertical tabs that expand on-hover (with and without floating tabs):

i have tried using this mod however it seems to be broken. it doesn't work with the tabs set to the right. And the workspace panel seems to extend way past the rest when not hovered. also the pages seems to be under the tabs and panel now which means i can't click on anything that is beneath...

The mod seems not working now. I recreate it with the animation style i prefer. Instead of op's expand-everything, it expand only the tabbar currently hovering.
Preview:

This is the css code (i guess it'll work when tabbar is on the right, but not tested)

#tabs-container.left, #tabs-subcontainer.left,
#tabs-container.right, #tabs-subcontainer.right {
  min-width: 32px;
  transition: min-width 300ms ease-out !important;
}

#tabs-container.left:hover, #tabs-subcontainer.left:hover,
#tabs-container.right:hover, #tabs-subcontainer.right:hover {
  min-width: 150px !important;
}

.tabbar-workspace-button {
  width: 100% !important;
}

#tabs-tabbar-container.left, #tabs-tabbar-container.right {
  width: auto !important;
  min-width: 32px;
}

.button-toolbar.newtab {
  left: 0px !important;
  width: 150px;
}

If you want the expanded tabbar floating on the website instead of squeezing it, just add the following css to the css above:

/** Make the expanded tabbar float on the webpage. Use with tab-expansion mod. **/
#main > .inner > div:has(#tabs-tabbar-container:is(.left, .right)) {
  position: absolute;
  z-index: 2;
  opacity: 1;
  background-color: var(--colorBg);
  height: 100% !important;
}

#browser.transparent-tabbar .inner > div:has(#tabs-tabbar-container:is(.left, .right)) {
  background-color: var(--colorImageFgHeaviest);
}

.inner #webpage-stack {
  margin-left: 32px;
}

.inner:has(#tabs-subcontainer:is(.left, .right)) #webpage-stack {
  margin-left: 64px;
}

A flaw is that hovering the workspace button in tabbar won't trigger animation. Didn't come up a solution for this. I removed that button so it does not affect me though.

[rexxDZN]

@AC0xRPFS001 i have it set on the left side, and tried the right one as well, but the css for me doesn't do anything. it seems. the first one alone doesn't and if the other one is added as well. i am aware that it doesn't work on hover, how do u get it to expand. i have no other css installed.

[dude99]

@OsoPolar Sorry, I can't help you with your problem. Cuz i don't have access to the latest stable version since v5.7, thus I don't know most of the changes in codes and behavior since then...

You will have better luck by follow other active members' instruction on setting up Vivaldi custom CSS support feature. https://forum.vivaldi.net/post/720152

[rexxDZN]

Hi so i have tried this recent modification from another user @AC0XRPFS001
that allows me to expand the workspace bar as needed. see the gif

However for me it doesn't seem to do anything, i have placed it under the correct folder yes. i was on version Vivaldi 6.5 (3206.39) and updated to the Vivaldi 6.5 (3206.42) and it still doesn't work.

here is the css

#tabs-container.left, #tabs-subcontainer.left,
#tabs-container.right, #tabs-subcontainer.right {
  min-width: 32px;
  transition: min-width 300ms ease-out !important;
}

#tabs-container.left:hover, #tabs-subcontainer.left:hover,
#tabs-container.right:hover, #tabs-subcontainer.right:hover {
  min-width: 150px !important;
}

.tabbar-workspace-button {
  width: 100% !important;
}

#tabs-tabbar-container.left, #tabs-tabbar-container.right {
  width: auto !important;
  min-width: 32px;
}

.button-toolbar.newtab {
  left: 0px !important;
  width: 150px;
}

here is how my browser looks like if that is the problem
and i have no other css modifications applied.

[AC0xRPFS001]

@rexxDZN said in Collapsing vertical tabs that expand on-hover (with and without floating tabs):

@AC0xRPFS001 i have it set on the left side, and tried the right one as well, but the css for me doesn't do anything. it seems. the first one alone doesn't and if the other one is added as well. i am aware that it doesn't work on hover, how do u get it to expand. i have no other css installed.

I remove all my css/js mods and it still work as expected. Can you check if the css is install correctly? If it is, the filename would appear in vivaldi://vivaldi-data/css-mods/css, and the content is at vivaldi://vivaldi-data/css-mods/filename-of-cssmod.css.

Since vivaldi is using html/css, i dont think its because of the difference between windows vivaldi and macos vivaldi. I've checked if some settings on tab would fail the mod (not found yet though).

To me, the tabbar expands as i'm hovering it. However i notice some "unintended features" (bug?) like the tabbar's space still occupying the place when watching a video in fullscreen. Might try to solve that if i have time (and if it can be done with pure css).

[OsoPolar]

@AC0xRPFS001 not sure if it helps you see my shory video
I tried to embed but keep getting told t enough privilege

https://xbackbone.osopolar.cloud/VIDE3/dAbOLITo66.mp4

[rexxDZN]

@OsoPolar what is your os and vivaldi version?

[OsoPolar]

@rexxDZN Linux

6.5.3206.42 (Stable channel) stable (64-bit)

[rexxDZN]

@AC0xRPFS001 I have looked both up and they do still show that they are imported. are in the correct folder. however the second method "vivaldi://vivaldi-data/css-mods/filename-of-cssmod.css" it just gives me an error that it can't reach that website but this shouldn't be the problem since it does just show in css-mods/css.

for me the css deadass not even doing anything to the tabs. u might wanna take a look into my settings and compare them to yours.

[AC0xRPFS001]

@OsoPolar said in Collapsing vertical tabs that expand on-hover (with and without floating tabs):

@AC0xRPFS001 not sure if it helps you see my shory video
I tried to embed but keep getting told t enough privilege

https://xbackbone.osopolar.cloud/VIDE3/dAbOLITo66.mp4

This looks perfectly what it should be, except the line appeared after you click the new tab. Is that your other mod or some vivaldi setting? Since I have no idea of what that is.

---

@rexxDZN said in Collapsing vertical tabs that expand on-hover (with and without floating tabs):

@AC0xRPFS001 I have looked both up and they do still show that they are imported. are in the correct folder. however the second method "vivaldi://vivaldi-data/css-mods/filename-of-cssmod.css" it just gives me an error that it can't reach that website but this shouldn't be the problem since it does just show in css-mods/css.

It should be like this. I call the file tab-expand.css, so in vivaldi://vivaldi-data/css-mods/css, it will have a line @import url('tab-expand.css');. And when I visit vivaldi://vivaldi-data/css-mods/tab-expand.css it shows the codes of the mod.

for me the css deadass not even doing anything to the tabs. u might wanna take a look into my settings and compare them to yours.

Our settings look almost identical. To test it more precisely, I download a brand new vivaldi in windows enviroment and change the settings to which you send. I also named the css folder identical to yours. Unfortunately everything works as expected, making me have no idea what happened.

Preview:

So even in a clean environment (and probably the one closer to yours) I still cannot reproduce your problem. Perhaps we need someone who is more familiar with (debugging) css mod to help (or ask vivaldi team to make this feature built-in. This should be a built-in feature methinks).

---

If possible, can you use inspector and see if the styles are applying to the elements properly?

If not, can you use console to find who is selected by the seletor, and/or copy the full selector of your tab-container.

[Pathduck]

@rexxDZN List the content of the vivaldi://vivaldi-data/css-mods/css. It's just text, copy and paste, then use a code block (</> icon)

Do you have spaces in your CSS file names? You can't have spaces, it won't work (don't know why)...

And guys please try to avoid posting all these gigantic screenshots, resize before you post or just post the relevant parts. Capture a part of the page.
It makes the forum harder to read.