Collapse the second tab row in the vertical tab bar
-
Preview
Required settings
Settings -> Tabs -> Tab Bar Position: Left
Right-click menu on tab bar -> Lock Second Tab Row
Widen the tab bar to its maximum width.CSS
#browser { --coll-tabbar-1strow-width: 140px; --coll-tabbar-2ndrow-width: 180px; } #browser { --coll-tabbar-gap: max(var(--densityGap), 1px); --coll-tabbar-radius: var(--radiusHalf); --coll-tabbar-transtime: 150ms; &.density-on { --coll-tabbar-radius: var(--radius); } &.animation-off { --coll-tabbar-transtime: 0; } } .tabs-left.stacks-substrip { .tabbar-workspace-button { position: absolute !important; backdrop-filter: none !important; background-color: transparent !important; width: var(--coll-tabbar-1strow-width) !important; } .separator-wsbutton { padding-top: calc(27px + var(--coll-tabbar-gap) * 3) !important; width: var(--coll-tabbar-1strow-width) !important; } .tabbar-wrapper:has(.tabbar-workspace-button) #tabs-container { padding-top: calc(45px + var(--coll-tabbar-gap) * 2) !important; } .tabbar-wrapper { width: calc(var(--coll-tabbar-1strow-width) + var(--coll-tabbar-gap) * 2 + 30px) !important; } &.transparent-tabbar .tabbar-wrapper::before { width: calc(var(--coll-tabbar-1strow-width) + var(--coll-tabbar-2ndrow-width)) !important; } #tabs-tabbar-container { width: calc(var(--coll-tabbar-1strow-width) + var(--coll-tabbar-2ndrow-width)) !important; padding-top: var(--coll-tabbar-gap) !important; } #tabs-subcontainer { flex-basis: var(--coll-tabbar-2ndrow-width) !important; } #tabs-subcontainer .tab-position { --Width: calc(var(--coll-tabbar-2ndrow-width) - var(--coll-tabbar-gap) * 2) !important; } #tabs-subcontainer:has(.overflow) .tab-position { --Width: calc(var(--coll-tabbar-2ndrow-width) - var(--coll-tabbar-gap) * 2 - var(--scrollbarWidth)) !important; } #tabs-subcontainer .tab-header { padding-left: 6px !important; } #tabs-subcontainer .title { display: flex !important; } #tabs-subcontainer .favicon { display: flex !important; } &.alt-tabs #tabs-subcontainer .tab:hover .favicon { display: none !important; } &.alt-tabs:has(.force-hover) #tabs-subcontainer .favicon { display: none !important; } #tabs-subcontainer .tab:hover .close { display: flex !important; } &:has(.force-hover) #tabs-subcontainer .close { display: flex !important; } &:not(.alt-tabs) #tabs-subcontainer .close { margin-right: 6px !important; } #tabs-subcontainer .newtab { left: 0 !important; margin: auto !important; } #tabs-subcontainer .tabs-locked { display: none !important; } #tabs-tabbar-container .SlideBar--FullHeight { display: none !important; } .inner .StatusInfo { padding-left: calc(var(--coll-tabbar-1strow-width) + var(--coll-tabbar-gap) * 2 + 30px) !important; } } .tabs-left.stacks-substrip { .tabbar-wrapper::before { clip-path: inset(0 calc(var(--coll-tabbar-2ndrow-width) - var(--coll-tabbar-gap) * 2 - 30px) 0 0) !important; transition: clip-path var(--coll-tabbar-transtime) cubic-bezier(0, 1, 0, 0.9) 50ms !important; } .tabbar-wrapper:is(:hover, :focus-within)::before { clip-path: inset(0) !important; } #tabs-tabbar-container { clip-path: inset(0 calc(var(--coll-tabbar-2ndrow-width) - var(--coll-tabbar-gap) * 2 - 30px) 0 0) !important; transition: clip-path var(--coll-tabbar-transtime) cubic-bezier(0, 1, 0, 0.9) 50ms !important; } #tabs-tabbar-container:is(:hover, :focus-within) { clip-path: inset(0) !important; } #tabs-subcontainer .tab { border-radius: 0 !important; clip-path: inset(0 calc(var(--coll-tabbar-2ndrow-width) - var(--coll-tabbar-gap) * 2 - 30px) 0 0 round var(--coll-tabbar-radius)) !important; transition: clip-path var(--coll-tabbar-transtime) cubic-bezier(0, 1, 0, 0.9) 50ms !important; } #tabs-subcontainer:has(.overflow) .tab { clip-path: inset(0 calc(var(--coll-tabbar-2ndrow-width) - var(--coll-tabbar-gap) * 2 - 30px - var(--scrollbarWidth)) 0 0 round var(--coll-tabbar-radius)) !important; } #tabs-tabbar-container:is(:hover, :focus-within) #tabs-subcontainer .tab { clip-path: inset(0 round var(--coll-tabbar-radius)) !important; } #tabs-subcontainer .title { clip-path: inset(0 calc(var(--coll-tabbar-2ndrow-width) - var(--coll-tabbar-gap) * 2 - 30px) 0 0) !important; transition: clip-path var(--coll-tabbar-transtime) cubic-bezier(0, 1, 0, 0.9) 50ms !important; } #tabs-tabbar-container:is(:hover, :focus-within) #tabs-subcontainer .title { clip-path: inset(0) !important; } #webview-container { clip-path: inset(0) !important; transition: clip-path var(--coll-tabbar-transtime) cubic-bezier(0, 1, 0, 0.9) 50ms !important; } .inner:has(#tabs-tabbar-container:is(:hover, :focus-within)) #webview-container { clip-path: inset(0 0 0 calc(var(--coll-tabbar-2ndrow-width) - var(--coll-tabbar-gap) * 2 - 30px)) !important; } }
Development version (for snapshot)
https://gitlab.com/nafu_mofu/vivaldi-mods/-/blob/main/collapse-second-row-tab-bar.css -
This post is deleted! -
Update
FIX: Vivaldi 6.7 is supported. -
Update
FIX: Vivaldi 6.8 is supported. -
I'm having an issue with this mod since it was updated to support Vivaldi 6.8. It's causing the second tab row to stay expanded every time I mouse over the web page. To make it shrink again, I need to mouse over the top part of the browser UI, (Bookmarks Bar, Address Bar, etc) or mouse over the bottom part of the browser UI, (Status Bar).
-
@INeedTogepi
If that problem occurs when selecting text, then it is a bug in Vivaldi that causes the mouse pointer positioning information to shift.
https://forum.vivaldi.net/topic/97053 -
@nafumofu said in Collapse the second tab row in the vertical tab bar:
@INeedTogepi
If that problem occurs when selecting text, then it is a bug in Vivaldi that causes the mouse pointer positioning information to shift.
https://forum.vivaldi.net/topic/97053So far it hasn't seemed to be related to when I select text, since it's been occurring for most of my browsing and I don't select text often enough for that to make sense.
-
@INeedTogepi Yes this happens to me as well. But these animations are smooth though, the best I've seen.
-
Update
FIX: Vivaldi 6.9 is supported.