[Vertical tab - Extension] Possibility to change the width of the expanded tab lateral bar?

[Froggy232]

Describe the bug I would like to make tab center reborn expand larger when in expanded mode (when the mouse hover it) if possible. It's not a huge problem, but I think it could increase readability on large screen, like a desktop computer.

Setup information

• OS:Fedora Silverblue 39
• Installation method: Flatpak - Manual installation script
• Firefox version: 120
• Theme version: Master
• Optional features enabled: I don't think there is any

Thanks for your work, your theme is wonderfull!

[rafaelmardojai]

CC @BirdInFire

[ghost]

Describe the bug I would like to make tab center reborn expand larger when in expanded mode (when the mouse hover it) if possible. It's not a huge problem, but I think it could increase readability on large screen, like a desktop computer.

Setup information

• OS:Fedora Silverblue 39
• Installation method: Flatpak - Manual installation script
• Firefox version: 120
• Theme version: Master
• Optional features enabled: I don't think there is any

Thanks for your work, your theme is wonderfull!

@Froggy232 Can you give me the resolution of your "big screen" and if possible by how many you prefer it to be increased (since I do not have any screen superior to 1080p) I Never had to deal with larger screen :)

[Froggy232]

Hi, I use a 4k screen 32", to be honest I'm not sure if it's really too thin now that I have used it like that for a few weeks, but I wouldn't mind if it were a little larger I think. I'm not sure if larger should be the default though. Not to sure how much it should be increased neither, maybe 20% would be a good start? Anyway, it's a very minor thing, and I'm not even sure if it's a problem. Maybe the actual default is better than my proposition, so if you don't have time to throw at that I would totally understand of course. Thanks for your answer anyway, and have a very nice Christmas!

[ghost]

Hi,

I use a 4k screen 32", to be honest I'm not sure if it's really too thin now that I have used it like that for a few weeks, but I wouldn't mind if it were a little larger I think. I'm not sure if larger should be the default though.

Not to sure how much it should be increased neither, maybe 20% would be a good start?

Anyway, it's a very minor thing, and I'm not even sure if it's a problem. Maybe the actual default is better than my proposition, so if you don't have time to throw at that I would totally understand of course.

Thanks for your answer anyway, and have a very nice Christmas!

I will do update by increase it little by little if you can tell me witch one seem the best ? (Will give you link with file to try) once a good found

I will push it and if another 4K user find it too much he can come open an issue and we will retry to found a good way

If it's ok with you

[Froggy232]

So sorry, I just saw your answer, thanks you a lot, it's absolutely perfect! Thanks you a lot again!

[ghost]

So sorry, I just saw your answer, thanks you a lot, it's absolutely perfect!

Thanks you a lot again!

I will check soon I just have some difficulty at work right now

[Froggy232]

Take all the time you need, it can wait a long time obviously, it's not urgent at all. I will stay available, so I will just wait for your news. Thanks you again for your work, and sorry for your difficulty at work, I hope it will get better soon. Have a nice day!

[ghost]

Take all the time you need, it can wait a long time obviously, it's not urgent at all. I will stay available, so I will just wait for your news. Thanks you again for your work, and sorry for your difficulty at work, I hope it will get better soon. Have a nice day!

Hey @Froggy232 had some time with a device that can do 4K (not native) but since it's not a native one (blurry etc) difficult for me to see if it's enough or not, can you try this replace the content of theme > extensions > tab-center-reborn.css end give me your input on this version ?

Don't forget to save a copy of the one you replace before

@media (-moz-bool-pref: "gnomeTheme.extensions.tabCenterReborn") {
    :root {
        --delay: 0s;
        --transition-time: 0.2s;
        --positionX1: 48px;
        --positionX2: absolute;
    }

    #tabbrowser-tabs {
        display: none !important;
    }

    #browser {
        position: relative;
    }

    #tabbrowser-tabbox {
        z-index: 0 !important;
    }

    #navigator-toolbox {
        z-index: 10 !important;
    }

    #sidebar-box:not([lwt-sidebar]){
        appearance: unset !important;
    }

    #sidebar-box[sidebarcommand*="tabcenter"] {
        z-index: 1 !important;
    }

    #sidebar-box[sidebarcommand*="tabcenter"] #sidebar-header {
        visibility: collapse;
        display: none;
    }

    [sidebarcommand*="tabcenter"] #sidebar, #sidebar-box[sidebarcommand*="tabcenter"]  {
        min-width: 48px !important;
        max-width: 48px !important;
    }

    #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
        display: block;
        position: var(--positionX2);
        box-sizing: content-box;
        min-width: 48px;
        max-width: 48px;
        overflow: hidden;

        border-right: 1px solid var(--sidebar-border-color);
        z-index: 1 !important;
        top: 0;
        bottom: 0;
    }

    #main-window[inFullscreen] #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
        min-width: 1px;
        max-width: 1px;
    }

    #sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
    #sidebar-box[sidebarcommand*="tabcenter"]:hover {
        min-width: 10vw !important;
        width: 30vw !important;
        max-width: 200px !important;
        z-index: 1 !important;
        animation-timing-function: linear;
        transition: all var(--transition-time) ease var(--delay);
    }

    #sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) #sidebar,
    #sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) {
        animation-timing-function: linear;
        transition: all var(--transition-time) ease 0s;
    }

    @media (width >= 1200px) {
        #sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
        #sidebar-box[sidebarcommand*="tabcenter"]:hover {

            max-width: 250px !important;
        }
    }

    @media (width >= 2000px) {
        #sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
        #sidebar-box[sidebarcommand*="tabcenter"]:hover {

            max-width: 400px !important;
        }
    }

    [sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
        display: none;
    }

    [sidebarcommand*="tabcenter"] #sidebar {
        max-height: 100%;
        height: 100%;
    }

    #main-window:not([inFullscreen]) #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) ~ #appcontent {
        margin-left: var(--positionX1);
    }

    #main-window[inFullscreen][inDOMFullscreen] #appcontent {
        margin-left: 0;
    }

    #main-window[inFullscreen] #sidebar {
        height: 100vh;
    }

    [sidebarcommand*="tabcenter"] #sidebar-header {
        background: #0C0C0D;
        border-bottom: none !important;
    }

    [sidebarcommand*="tabcenter"] ~ #sidebar-splitter {
        border-right-color: #0C0C0D !important;
        border-left-color: #0C0C0D !important;
    }

    [sidebarcommand*="tabcenter"] #sidebar-switcher-target,
    [sidebarcommand*="tabcenter"] #sidebar-close {
        filter: invert(100%);
    }

    @media (max-width: 630px) {
        #urlbar-container {
            min-width: 100% !important;
        }

        #menubar-items {
            display: none !important;
        }
    }

    #main-window[inFullscreen="true"] #sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"],
    #main-window[inFullscreen="true"] #sidebar-box[sidebarcommand="tabcenter-reborn_ariasuni-sidebar-action"] + splitter {
        visibility: collapse;
        animation: var(--transition-time) fadeOut;
        animation-fill-mode: forwards;
    }

    @keyframes fadeOut {
        0% {
            visibility: visible;
            opacity: 1;
        }

        100% {
            opacity: 0;
        }
    }
}

@media (-moz-bool-pref: "gnomeTheme.extensions.tabCenterReborn.alwaysOpen") {
    #sidebar-box[sidebarcommand*="tabcenter"] #sidebar,
    #sidebar-box[sidebarcommand*="tabcenter"] {
        min-width: 10vw !important;
        width: 30vw !important;
        max-width: 250px !important;
        z-index: 1 !important;
        transition: all var(--transition-time) ease var(--delay);
    }

    #sidebar-box[sidebarcommand*="tabcenter"]:not([hidden]) {
        position: relative;
        margin-right: -50px;
    }

    @media (width >= 1200px) {
        #sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
        #sidebar-box[sidebarcommand*="tabcenter"]:hover {
            max-width: 250px !important;
        }
    }

    @media (width >= 2000px) {
        #sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
        #sidebar-box[sidebarcommand*="tabcenter"]:hover {
            max-width: 400px !important;
        }
    }
}

@media (-moz-bool-pref: "gnomeTheme.extensions.tabCenterReborn.animationDisabled") {
    #sidebar-box[sidebarcommand*="tabcenter"]:hover #sidebar,
    #sidebar-box[sidebarcommand*="tabcenter"]:hover {
        transition: none !important;
    }

    #sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) #sidebar,
    #sidebar-box[sidebarcommand*="tabcenter"]:not(:hover) {
        animation-timing-function: linear;
        transition: none !important;
    }

}

[ghost]

Change merged in : https://github.com/rafaelmardojai/firefox-gnome-theme/pull/764#event-12177104244

[ghost]

@rafaelmardojai since it committed to fix it can you close it (can be reopened later by @Froggy232 if not ok)

[Froggy232]

Hi, Sorry for the delay, thanks you A LOT, it's way better now, I think it's perfect. The only small complain is that since the update, I have a little graphical glitch in the opening or the closening of the tabs bar. Is it normal? Maybe it's totally not related to this change anyway, or maybe it was already present but not visible with the previous settings. Thanks you a lot for your time, the issue is indeed close I think. Have a nice day, and thanks you again!

[ghost]

Hi, Sorry for the delay, thanks you A LOT, it's way better now, I think it's perfect. The only small complain is that since the update, I have a little graphical glitch in the opening or the closening of the tabs bar. Is it normal? Maybe it's totally not related to this change anyway, or maybe it was already present but not visible with the previous settings. Thanks you a lot for your time, the issue is indeed close I think. Have a nice day, and thanks you again!

No it's, not related to this change, I only added a specific size for the screen with more than 2K.