Tab Bar cutted using CSS

[mgunt5]

Tab bar (When tabs are placed on top of address bar) seems cut off after the latest Vivaldi Snapshot update when using certain CSS modifications.

Vivaldi Snapshot version: 6.9.3392.10
Chromium Version: 126.0.6478.119

When I run Vivaldi Snapshot for Linux, the browser opens otherwise okay. The only glaring issue is that the tab bar (on top) seems “cut off” or disconnected from the navigation bar. It was not like this in previous versions of Vivaldi Snapshot.

Here are some screenshots of what the issue looks like. Note: No personal information nor NSFW content is displayed in these images.

I was able to narrow down, through process of elimination, the offending CSS files causing this problem.

ModifyTabWidth.css

html {
    --tab-size-multiplier: 1.58 !important;
}

html #browser.linux.maximized ,
html #browser.linux.fullscreen {
    --tab-size-multiplier: 1.58 !important;
}

html #browser.linux.maximized .tab-position.is-pinned,
html #browser.linux.fullscreen .tab-position.is-pinned {
    --tab-size-multiplier: 1 !important;
}

html .tab-position.is-pinned {
    --tab-size-multiplier: 1 !important;
}
.tab-position {
    transform: translateX(calc(var(--PositionX)*var(--tab-size-multiplier))) translateY(calc(var(--PositionY)*var(--tab-size-multiplier))) !important;
    height: calc(var(--Height)*var(--tab-size-multiplier)) !important;
    width: calc(var(--Width)*var(--tab-size-multiplier)) !important;
}
#tabs-subcontainer .tab-position {
    transform: translateX(calc(var(--PositionX)*var(--tab-size-multiplier))) translateY(calc(var(--PositionY)*var(--tab-size-multiplier))) !important;
    height: calc(var(--Height)*var(--tab-size-multiplier));
    width: calc(var(--Width)*var(--tab-size-multiplier));
}
.tabbar-wrapper .newtab {
    left: calc(var(--PositionX)*var(--tab-size-multiplier)) !important;
    top: calc(var(--PositionY)*var(--tab-size-multiplier)) !important;
}
#browser.tabs-top .svg-tab-stack, #browser.tabs-bottom .svg-tab-stack {
    width: calc(var(--Width)*var(--tab-size-multiplier)) !important;
}
#browser.tabs-left .svg-tab-stack, #browser.tabs-right .svg-tab-stack {
    height: calc(var(--Height)*var(--tab-size-multiplier)) !important;
}
#browser.tabs-top, #browser.tabs-bottom {
    & #tabs-tabbar-container {
        padding-right: calc(0px) !important;
        padding-left: calc(0px) !important;
   }
    & #tabs-subcontainer.visible {
        width: 100vw;
   }
}

ChangeToolbarIconSize.css

.ToolbarButton-Button svg, img.favicon {
    transform: scale(1.25)
}

.SiteInfoButton.internal, .SiteInfoButton.internal[disabled] {
    transform: scale(1.25);
}

button[aria-label="New Tab"] {
    transform: scale(1.175);
}

.burger-icon {
    transform: scale(1.38);
    margin-bottom: 2px !important;
    margin-left: 6.2px !important;
}

#browser.linux.maximized .burger-icon {
    transform: scale(1.38);
    margin-top: 7.2px !important;
    margin-left: 6.5px !important;
}

I hope this information helps to resolve my issue. Thank you all, and have a great day, evening, or night depending on when you read this and your time zone.

--
ModEdit: Title

[luetage]

@mgunt5 You can narrow it further down, I’m sure. You can get a 50% improvement by disabling one of the scripts and checking whether the problem persists for example. Then comment out the top half of the offending script, check again, then comment out half of the offending half and so forth. At the end you will find the culprit.

If you don’t want to do that, post about it in the topics you took the code from. It likely broke for somebody else too.

[mgunt5]

@luetage I made ChangeToolbarIconSize.css entirely by myself with no copying and pasting from the forums. I don't know where I got the code for ModifyTabWidth.css, but I believe it broke for the person who originally shared the code.

[mgunt5]

Update: Good news! I asked my question to the CSS sub-community in Stack Overflow, and someone was able to solve my problem by providing some CSS code. Here is the CSS code.

html .tab-position.is-pinned {
    position: relative;
    top: 9.1px;
}

html #browser.linux.maximized .tab-position.is-pinned,
html #browser.linux.fullscreen .tab-position.is-pinned {
    position: relative;
    top: -0.1px;
}

div[aria-labelledby="tabbar-toplevel-label"] {
    position: relative;
    top: 3.2px;
}

Source: https://stackoverflow.com/questions/78672287/my-div-tag-with-aria-labelledby-of-tabbar-toplevel-label-is-seemingly-cut-of/78672527#78672527

My problem is officially solved and I hope this helps.