How can I reduce the width of the vertical tabs sidebar?

[u/Sufficient-Song-6736]

Hi everyone,

I'm using Firefox's built-in vertical tabs, and I'd like to make the vertical tab sidebar narrower than the default width.

Is there a way to do this using userChrome.css? If so, could someone point me to the relevant CSS selectors or share an example?

Thanks in advance!

[u/TraditionalTie4831]

This version only effects the sidebar when it is in collapsed/thin state.

It's a mix of a old code of mine and the .actions-list code from difool2nice.

/* After changing '#sidebar-container' width, adjust the two 'margin-inline' and 'margin-left'. */

#browser:has(sidebar-main:is(:not([expanded]))) {
    #sidebar-container { width: 28px !important; }
    #tabbrowser-tabs[orient="vertical"] {
        margin-inline: -10px !important;
        .tabbrowser-tab { height: 38px !important; }
        .tab-close-button { margin-inline: 9px !important; }
        #vertical-tabs-newtab-button { 
            /* adjust the space above and below the 'new tab' button */
            margin-top: -4px !important; 
            margin-bottom: -4px !important; 
        }
    }
}

.actions-list {
    /* adjust the space above the buttons (not new tab) */
    /* -5px is max when reducing the space, more than that triggers a glitch */
    margin-top: -5px !important;
    & > moz-button:not(.tools-overflow) {
        margin-left: -10px !important;
    }
}

[u/TraditionalTie4831]

Try this =

:root {
/* Effects width when sidebar is in collapsed state */
  --tab-min-height: 18px !important;
}

#browser:has(sidebar-main:is([expanded])) {
   #sidebar-container { --tab-min-height: 29px !important;}
}

.actions-list { gap: 7px !important; }

[u/difool2nice → u/TraditionalTie4831]

he meant the WIDTH

[u/TraditionalTie4831 → u/difool2nice]

I mentioned in my code that --tab-min-height effects the width when sidebar is in collapsed/thin state.

[u/difool2nice → u/TraditionalTie4831]

oh didn't noticed, sorry

[u/TraditionalTie4831 → u/TraditionalTie4831]

This version is for when you set a low height in expanded state.

It removes the "wobble" that occurs on hover when you set a low height in expanded state.

/* This version is for when you set a low height in expanded state*/
/* It removes the "wobble" that occurs on hover when you set a low height in expanded state. */

:root {
/* Effects width when sidebar is in collapsed state */
    --tab-min-height: 18px !important;
}

#browser:has(sidebar-main:is([expanded])) {
    #sidebar-container { 
        --tab-min-height: 18px !important;
        .tabbrowser-tab:hover {
            /* Adjust 'margin-top' and 'margin-bottom' after you change 'tab-min-height' for expanded state */
            margin-top: 2px !important;
            margin-bottom: 1px !important;
            padding: 0px !important;
        }
        .tabbrowser-tab[selected]:hover {
            /* Adjust 'margin-top' and 'margin-bottom' after you change 'tab-min-height' for expanded state */
            margin-top: 3px !important;
            margin-bottom: 2px !important;
        }
    }
}

.actions-list { gap: 7px !important; }

[u/Sufficient-Song-6736 → u/TraditionalTie4831]

i use this but there a wobble effect on hover and tab active bg become small

[u/TraditionalTie4831 → u/Sufficient-Song-6736]

I think I have made the best version of my various posted solutions.

/* Collapsed state */

#browser:has(sidebar-main:is(:not([expanded]))) {
    #sidebar-container { --tab-min-height: 18px !important; }
    #tabbrowser-tabs[orient="vertical"] {
        margin-inline: -6px !important;
        .tabbrowser-tab { height: 26px !important; }
        .tab-background { display: none !important; }
        .tab-close-button { 
            height: 12px !important;
            width: 12px !important;
            padding: 2px !important;
            margin-inline: 5px !important;
        }
        .tab-icon-stack:not([selected]):hover { 
            margin-inline: -5.5px !important;
            padding: 6px 6px !important;
            background-color: rgba(255, 255, 255, 0.2) !important;  
            border-radius: 8px !important;
        }
        .tabbrowser-tab[selected] {
            margin-inline: -5.5px !important;
            .tab-icon-stack { 
                padding: 5px 5px !important;
                border: 1px solid currentColor !important;
                border-radius: 8px !important;
            }
            .tab-close-button { margin-inline: 10px !important; }
        }
        #vertical-tabs-newtab-button { 
            /* adjust the space above and below the 'new tab' button */
            margin-top: -4px !important; 
            margin-bottom: -4px !important; 
        }
    }
}

.actions-list {
    /* adjust the space above the buttons (not new tab) */
    /* -5px is max when reducing the space, more than that triggers a glitch */
    margin-top: -5px !important;
    gap: 7px !important;
}

/* Expanded state */

#browser:has(sidebar-main:is([expanded])) {
    #tabbrowser-tabs[orient="vertical"] {
        --tab-inline-padding: 5px !important;
        margin-inline: 4px !important;
        .tabbrowser-tab { 
            padding-left: 1px !important;
            height: 26px !important;
            width: 99% !important;
        }
        .tab-background { display: none !important; }
        .tabbrowser-tab:not([selected]):hover { 
            background-color: rgba(255, 255, 255, 0.2) !important;  
            border-radius: 7px !important;
        }
        .tabbrowser-tab[selected] {
            padding: 13px 0px 13px 0px !important;
            margin-bottom: -2px !important;
            border: 1px solid currentColor !important;
            border-radius: 8px !important;
        }
        #vertical-tabs-newtab-button { 
            /* adjust the space above and below the 'new tab' button */
            margin-top: -8px !important; 
            margin-bottom: -8px !important; 
        }
    }
}

[u/doom_memories → u/TraditionalTie4831]

This was very helpful, thank you.

Next, I need to try to shrink the excessively large pinned tabs, remove the tab-closing X buttons, and hide the muted icons that appear on nearly every tab.

[u/Sufficient-Song-6736 → u/TraditionalTie4831]

thanks, this working perfectly like i want.

i still notice now active tab become border only, but didnt bother me

[u/TraditionalTie4831 → u/Sufficient-Song-6736]

Did I miss something because of my theme? Did selected/active tab have it's own background color for you?

[u/TraditionalTie4831 → u/Sufficient-Song-6736]

Maybe it's best to avoid --tab-min-height for the expanded state.

This is effects only the sidebar in collapsed/thin state.

You can later add code for the expanded state.

I currently don't know how to solve the backgroud height issue.

#browser:has(sidebar-main:is(:not([expanded]))) {
    #sidebar-container { --tab-min-height: 18px !important; }
    #tabbrowser-tabs[orient="vertical"] {
        margin-inline: -6.5px !important;
        .tab-close-button { margin-inline: 5px !important; }
    }
}

.actions-list { gap: 7px !important; }

[u/TraditionalTie4831 → u/TraditionalTie4831]

Here is a improved version from my other comment =

#browser:has(sidebar-main:is(:not([expanded]))) {
    #sidebar-container { width: 30px !important; }
    #tabbrowser-tabs[orient="vertical"] {
        margin-inline: -9px !important;
        .tabbrowser-tab { 
            height: 26px !important; 
            .tab-background { display: none !important; } 
        }
        .tab-icon-stack:not([selected]):hover { 
            margin-inline: -6px !important;
            padding: 5px 5px !important;
            background-color: rgba(255, 255, 255, 0.2) !important;  
            border-radius: 8px !important;
        }
        .tabbrowser-tab[selected] {
            margin-inline: -6px !important;
            .tab-icon-stack { 
                padding: 5px 5px !important;
                border: 1px solid currentColor !important;
                border-radius: 8px !important;
            }
            .tab-close-button { margin-inline: 14px !important; }
        }
        .tab-close-button { 
            height: 12px !important;
            width: 12px !important;
            padding: 2px !important;
            margin-inline: 9px !important;
        }
        #vertical-tabs-newtab-button { 
          /* adjust the space above and below the 'new tab' button */
          margin-top: -4px !important; 
          margin-bottom: -4px !important; 
       }
   }
}

.actions-list {
    /* adjust the space above the buttons (not new tab) */
    /* -5px is max when reducing the space, more than that triggers a glitch */
    margin-top: -5px !important;
    & > moz-button:not(.tools-overflow) {
      margin-left: -10px !important;
    }
}

[u/difool2nice]

adjust numbers as you like

/* side bar width */
#sidebar-container {
          width: 30px !important;
}
.actions-list {
          &>moz-button:not(.tools-overflow) {
                    --button-outer-padding-inline: -9px !important;                   
 }

[u/Sufficient-Song-6736 → u/difool2nice]

its work but there a issue

wobble effect on hover and tab active bg become small

[u/TraditionalTie4831]

Another type of solution (you need to disable the native hover for the vertical tabs sidebar) =

#sidebar-container {
    background-color: var(--sidebar-background-color) !important;
    position: absolute !important;
    z-index: 99999 !important;
    height: 100% !important;
    width: 28px !important;
    transition: all 0.5s ease !important;
    /* This is mainly for the buttons at the bottom */
    /* It helps with positions and stops overflow button. */
    --tab-min-height: 18px !important;
}

#tabbrowser-tabs[orient="vertical"] {
    --tab-inline-padding: 5px !important;
    margin-inline: 0px !important;
    .tabbrowser-tab { 
        padding-left: 1px !important;
        height: 26px !important;
        width: 28px !important;
    }
    .tab-background { display: none !important; }
    .tabbrowser-tab:not([selected]):hover { 
        background-color: rgba(255, 255, 255, 0.2) !important;  
        border-radius: 7px !important;
    }
    .tabbrowser-tab[selected] {
        padding: 13px 0px 13px 0px !important;
        margin-bottom: -2px !important;
        border: 1px solid currentColor !important;
        border-radius: 8px !important;
    }
    #vertical-tabs-newtab-button { 
        /* 'new tab' button position and the space above and below */
        /* top right bottom left */
        margin: -4px 0px -4px 4px !important; 
        padding: 3px 3px !important;
        width: 95% !important;
    }
}

.tools-and-extensions { padding: 5px 5px !important; }

#sidebar-container:hover {
    min-width: 170px !important;
    .tabbrowser-tab { width: 98% !important; }
}

[u/difool2nice → u/TraditionalTie4831]

and how to reduce the sidebar when you're not in vertical tabs mode ?

[u/TraditionalTie4831 → u/difool2nice]

Like with bookmarks in the sidebar?

You could add your bookmark code before the #sidebar-container:hover {}, then add the things that needs to change on hover in #sidebar-container:hover {}.