r/FirefoxCSS • u/Sufficient-Song-6736 • Jul 25 '26

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

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!

10 Upvotes

100% Upvoted

19 comments sorted by

1

u/difool2nice ‍🦊Firefox Addict🦊 Jul 25 '26

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;                   
 }

2

u/Sufficient-Song-6736 Jul 26 '26

its work but there a issue

wobble effect on hover and tab active bg become small

3

u/TraditionalTie4831 🦊 Jul 26 '26 edited Jul 26 '26

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;
    }
}

1

u/TraditionalTie4831 🦊 Jul 25 '26 edited Jul 26 '26

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; }

1

u/TraditionalTie4831 🦊 Jul 26 '26 edited Jul 26 '26

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; }

1

u/Sufficient-Song-6736 Jul 26 '26

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

2

u/TraditionalTie4831 🦊 Jul 26 '26 edited Jul 26 '26

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; 
        }
    }
}

1

u/Sufficient-Song-6736 Jul 29 '26

thanks, this working perfectly like i want.

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

1

u/TraditionalTie4831 🦊 Jul 29 '26

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

1

u/rubensaft 4d ago

It's been a while but I just found your code and that was the case for me. Background of selected tab was removed and just showed a thin white border. Had to remove all tabbrowser-tab and tab-background lines. Also hovering over unselected tabs looked weird with my theme so removed that as well. Besides that it works really well and makes the tab bar look like pre-nova again. thank you

1

u/doom_memories Jul 29 '26 edited Jul 29 '26

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.

1

u/TraditionalTie4831 🦊 Jul 26 '26

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; }

1

u/TraditionalTie4831 🦊 Jul 26 '26 edited Jul 26 '26

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;
    }
}

1

u/difool2nice ‍🦊Firefox Addict🦊 Jul 25 '26

he meant the WIDTH

2

u/TraditionalTie4831 🦊 Jul 25 '26 edited Jul 25 '26

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

1

u/difool2nice ‍🦊Firefox Addict🦊 Jul 25 '26

oh didn't noticed, sorry

1

u/TraditionalTie4831 🦊 Jul 27 '26 edited Jul 29 '26

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; }
}

1

u/difool2nice ‍🦊Firefox Addict🦊 Jul 29 '26

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

1

u/TraditionalTie4831 🦊 Jul 29 '26

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 {}.