Collapse the second tab row in the vertical tab bar

[nafumofu]

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-transtime: 150ms;
    
    &.animation-off {
        --coll-tabbar-transtime: 0;
    }
}

.tabs-left.stacks-substrip {
    #main:has(.tabbar-wrapper:hover) #webview-container {
        pointer-events: none !important;
    }
    
    .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 {
        background-color: transparent !important;
    }
    &.transparent-tabbar .tabbar-wrapper::before {
        content: "" !important;
        position: absolute !important;
        inset: 0 !important;
        background-image: linear-gradient(var(--colorImageLeftFgAlphaHeavy), var(--colorImageLeftFgAlphaHeavy)) !important;
        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(--currentRadius)) !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(--currentRadius)) !important;
    }
    #tabs-tabbar-container:is(:hover, :focus-within) #tabs-subcontainer .tab {
        clip-path: inset(0 round var(--currentRadius)) !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

[nafumofu]

This post is deleted!

[nafumofu]

Update
FIX: Vivaldi 6.7 is supported.

[nafumofu]

Update
FIX: Vivaldi 6.8 is supported.

[INeedTogepi]

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

[nafumofu]

@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

[INeedTogepi]

@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/97053

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

[oneakira]

@INeedTogepi Yes this happens to me as well. But these animations are smooth though, the best I've seen.

[nafumofu]

Update
FIX: Vivaldi 6.9 is supported.

[nafumofu]

Update
FIX: When using a theme with “Transparent Tab Bar” enabled, the tab bar background is broken.

[nafumofu]

Update
FIX: Tab bar may not collapse