hi, I notice the issue happens when the #sidebar-main is ‘expanded’, when collapsed the problem doesn’t appear, I removed the code gap: 0px !important; and that solve the issue, but that space between the buttons makes me nervous jeje I tried delete too that ‘overflow’ button to remove the ‘flickering’ but the problem persist.

I’m personally adding that code for a smooth transition, so I don’t want to remove it.

I forgot to mention that I’m testing the code in Developer-edition new changes arrived there. I will check if other of my code, with the code posted here, makes the issue happens.

.tab-group-label {
        #tabbrowser-tabs[orient="vertical"][expanded] & {
            width: 100% !important;
            text-align: start !important;
        }
    }

Seems like other code combined with this are incompatible (with a tab with sound) in my particular case, first I have to figure it out what of my other code is in conflict, rare all this situation. With your latest code, the issue persist.

decrease the maximum width

Exactly, the default is so large, like a sausage.

I don’t know why that happens, but the problem persists, I delete that code block and the problem disappear. I’m in Windows 10 with Firefox-developer-edition 141.0b3, maybe other code is doing that? Or in combination with another thing, how to know. Here is a video with the issue: https://imgur.com/a/2ZLIYVp

Wow, I don’t know how it works but works, I will research ‘CSS container’, to learn. I appreciate your help. 💙

Excellent, thank you. 👍

I tested it and don’t work for me, I said I was in Developer-edition, maybe in release version is different. Here is a video with the issue, the sidebar doesn’t expand when it is on the right side: https://imgur.com/a/zqsWpqf

Thank you, I will add it immediately :)

Hi, for some reason when the sidebar-main is expanded there are 2 styles for ‘tools-and extensions’, when there are just a few icons they display in vertical, and when there are more than a few they display in horizontal, and I would like to have always the styles for ‘tools-and-extensions’ in horizontal when sidebar is expanded, even if there are just a few of icons. But I can’t apply code when they are in ‘vertical + sidebar expanded’ and don’t affect when the sidebar is collapsed.

I see, thanks for the answer. 🫱🏻‍🫲🏼

Thanks. 😄👍 💙

Thank you so much, so now all the rules needs to be variables, I don’t understand very well but it seems to work:

/* Normal tabs - Muted icon */
    
    .tab-audio-button[muted] {
        --my-position: absolute !important;
        --my-top: calc(var(--tab-height-personal)/2 - 14px) !important;
        --my-inset-inline-start: 14px !important;
        --my-background-image: url("../icons/paused.svg") !important;
        --my-background-color: transparent !important;
        --my-background-size: 12px !important;
        --my-box-shadow: none !important;
        --my-fill: var(--lwt-tab-text) !important;
        --my-opacity: 0.8 !important;
        --my-clip-path: xywh(1px 1px 86% 86% round 50%) !important;
        
        &:hover {
            --my-background-image: url("chrome://browser/skin/tabbrowser/tab-audio-blocked-small.svg") !important;
            --my-background-size: 8px !important;
            --my-box-shadow: inset 0 0 0 1px var(--contrast-color), inset 0 0 0 2px var(--lwt-tab-text) !important;
            --my-fill: var(--lwt-tab-text) !important;
            --my-opacity: 1 !important;
        }
    }
    
    .button-background {
        position: var(--my-position) !important;
        top: var(--my-top) !important;
        inset-inline-start: var(--my-inset-inline-start) !important;
        background-image: var(--my-background-image) !important;
        background-color: var(--my-background-color) !important;
        background-size: var(--my-background-size) !important;
        box-shadow: var(--my-box-shadow) !important;
        opacity: var(--my-opacity) !important;
        fill: var(--my-fill) !important;
        clip-path: var(--my-clip-path) !important;
    }

thanks you so much, the scrollbar isn’t in the right position but I thinks is perfect enough solution. 💙

hi, I had in that way in the past, but I wanted to remove the need to align the image (when menubar is on, when not, when bookmarks-bar is on, when not, where using tre-tabs and its necessary to align again). I will end removing the position: sticky from .sticky-container

the element with position: sticky makes it like float, always visible, and seems like the element don’t reserve space and other elements can go behind it, I don’t know how to solve it without remove that behavior (always visible on top).

I didn’t notice that change in your file, my mistake, thanks for the answer.

thanks for your time, I appreciate it. I will see how I resolve this with all your code. 💙