FIrefox - Vertical tab bar with auto hide

instructions.md

What to expect

Graphical aspect may vary depending on your choices in following the instructions below, but the end result should look something like this:

Enable Firefox features

Go to about:config and set all of the following to true:

    toolkit.legacyUserProfileCustomizations.stylesheets
    layers.acceleration.force-enabled
    gfx.webrender.all
    gfx.webrender.enabled
    layout.css.backdrop-filter.enabled
    svg.context-properties.content.enabled
    
    # LINUX ONLY - WORKAROUND FOR BAR HIDING ON DRAG EVENT
    widget.gtk.ignore-bogus-leave-notify = 1

Write your userChrome.css

1. Find your Firefox profile folder (about:support --> "Profile Directory")
2. Create a folder named chrome inside it.
3. Create a file named userChrome.css inside the chrome folder you just created.
4. Paste in userChrome.css whatever you like from above
5. Restart Firefox for changes to take effect. If nothing changes, try going to about:profiles and click the "Restart Normally" button in the upper right portion of the screen. Thanks @kr1s7ian for pointing this out.

To hide the "classic" horizontal tab toolar entirely

Paste this in your userChrome.css:

#TabsToolbar
{
    visibility: collapse;
}

To decrease the size of the sidebar header

Paste this in your userChrome.css:

/**
 * Decrease size of the sidebar header
 */
#sidebar-header {
  font-size: 1.2em !important;
  padding: 2px 6px 2px 3px !important;
}
#sidebar-header #sidebar-close {
  padding: 3px !important;
}
#sidebar-header #sidebar-close .toolbarbutton-icon {
  width: 14px !important;
  height: 14px !important;
  opacity: 0.6 !important;
}

To remove the sidebar header entirely

Paste this in your userChrome.css:

#sidebar-header {
  display: none;
}

To auto-hide the tab sidebar

Paste this in your userChrome.css:

#sidebar-header {
  /* display: none; */
  visibility: collapse !important;
}

/* Hide splitter */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] + #sidebar-splitter {
  display: none !important;
}

/* Shrink sidebar until hovered */
:root {
  --thin-tab-width: 32px;
  --wide-tab-width: 300px;
}
#sidebar-box:not([sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]) {
  min-width: var(--wide-tab-width) !important;
  max-width: none !important;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
  overflow: hidden !important;
  position: relative !important;
  transition: all 300ms !important;
  /*transition: all 0ms 0s !important;*/
  min-width: var(--thin-tab-width) !important;
  max-width: var(--thin-tab-width) !important;
  z-index: 2;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar {
  /*transition-delay: 0s !important;*/
  transition: all 300ms !important;
  min-width: var(--wide-tab-width) !important;
  max-width: var(--wide-tab-width) !important;
  z-index: 1;
}
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
  margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}

To auto-hide the horizontal tab bar when the sidebar is active

Paste this in your userChrome.css:

#main-window #titlebar {
  overflow: hidden;
  transition: height 0.3s 0.3s !important;
}
/* Default state: Set initial height to enable animation */
/* #main-window #titlebar { height: 3em !important; } */
#main-window[uidensity="touch"] #titlebar { height: 3.35em !important; }
#main-window[uidensity="compact"] #titlebar { height: 2.7em !important; }
/* Hidden state: Hide native tabs strip */
#main-window[titlepreface*="XXX"] #titlebar { height: 0 !important; }
/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*="XXX"] #tabbrowser-tabs { z-index: 0 !important; }

And then go to Sidebery settings > General > Preface value, enable it and set it to XXX.

Now You also need to remove indent when the bar is collapsed, or you won't be able to see all tabs

Go to SideBery settings --> Styles editor and add:

#root:not(:hover){
  --tabs-indent: 0;
}

EXTRA: Window close button

Credits: AndryGabry on my Patreon and @XargonWan here on github.

If you need the "window close" button, you can add it to your address bar.

1. Comment out this line:

/* Hidden state: Hide native tabs strip */
/*#main-window[titlepreface*="XXX"] #titlebar { height: 0 !important; }*/

2. Add the following:

/*Reference https://www.userchrome.org/*/
/* Hide title bar but keep window controls (minimize, maximize, close) */
/*Hide tabs and other things inside the titlebar, except window buttons*/
#main-window[titlepreface*="XXX"] .tabbrowser-tab{  display: none !important; }
#main-window[titlepreface*="XXX"] .scrollbox-clip{  width: 0 !important; }
#main-window[titlepreface*="XXX"] #alltabs-button{  display: none !important; }
#main-window[titlepreface*="XXX"] .toolbar-items{  display: none !important; }
/*Make sure that the titlebar and navbar are both on the same line*/
#main-window[titlepreface*="XXX"] #navigator-toolbox{  display: flex !important; box-sizing: border-box; justify-content:space-between; flex-direction: row-reverse;   flex-wrap: wrap; }
#main-window[titlepreface*="XXX"] .titlebar-spacer{  display: none !important; }
#main-window[titlepreface*="XXX"] #nav-bar{border-radius: 5px 0 0 0; display: flex; box-sizing: border-box; padding-top: 2px; align-items: center; flex: 1; flex-basis: 50%; width: 100% !important; }
/* on GNOME you can use max-width: 48px below, if you only have the "Close" button on windows (default) */
#main-window[titlepreface*="XXX"] #titlebar{border-radius: 0 5px 0 0; border-left: none !important; margin-top: 1px; flex: 1; flex-basis: 50%; width:10% !important; display: flex; max-width: 100px;   align-items: center;background-color: var(--toolbar-bgcolor) !important; border-left: 1px solid var(--toolbar-color);}
#main-window[titlepreface*="XXX"] #titlebar:-moz-window-inactive{opacity: 1 !important;}
#main-window[titlepreface*="XXX"] #TabsToolbar > *:not(.titlebar-buttonbox-container) {display: none !important;}
#PersonalToolbar {width: 100% !important; }
#tab-notification-deck {width: 100% !important;   flex-basis: 100%; width: 100% !important;}

Hi, I solved it by updating the scripts to the latest from MrOtherGuy.

For the Navigation bar (the tab bar) it would stay visible to me even if I pressed CTRL+e, while the sidebar would toggle normally. Previously it would correctly toggle me between the two, opening the sidebar and hiding the navbar, or vice versa as in Morro's video, when I pressed CTRL+e.

EDIT: I solved this with the @AnPerello css (thanks). Now I've got just one issue left

In web apps (I am on L.Mint 21.3, I create them with Web Apps) in which I have the Navigation bar disabled, I see the URL bar perpetually. Whereas if I turn the navbar back on (from Web Apps) the problem goes away -- but clearly I want to be able to turn the navbar off without that thing on the screen. Obviously before FF133 this did not happen.

I post my userChrome.css, if it can be useful to help me 🥹

/*AUTO HIDE BOOKMARKS

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

#PersonalToolbar {
  --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
  --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
  --uc-autohide-toolbar-delay: 450ms; /* The toolbar is hidden after 0.6s */

  /* 0deg = "show" ; 90deg = "hide" ;  Set the following to control when bookmarks are shown */
  --uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */
  --uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */
}

:root[uidensity="touch"] #PersonalToolbar {
  --uc-bm-padding: 7px;
}

#PersonalToolbar:not([customizing]) {
  position: relative;
  margin-bottom: calc(-1px - var(--uc-bm-height) - 2 * var(--uc-bm-padding));
  transform: rotateX(90deg);
  transform-origin: top;
  transition: transform 45ms linear var(--uc-autohide-toolbar-delay) !important;
  z-index: 1;
  /* The following properties should allow the themes with trasparent toolbars to work */
  background-color: transparent !important;
  background-repeat: no-repeat, no-repeat, var(--lwt-background-tiling);
  /* y position will be wrong if menubar is enabled... */
  --uc-bg-y: calc(
    -2 * (
        var(--tab-block-margin) + var(--toolbarbutton-inner-padding) +
          var(--toolbarbutton-outer-padding)
      ) - var(--tab-min-height) - 24px - var(--bookmark-block-padding)
  );
  background-position: top left, top left,
    var(--lwt-background-alignment, top left);
  background-position-y: top, top, var(--uc-bg-y), var(--uc-bg-y),
    var(--uc-bg-y);
  background-image: var(
      --toolbar-bgimage,
      linear-gradient(transparent, transparent)
    ),
    linear-gradient(var(--toolbar-bgcolor), var(--toolbar-bgcolor)),
    var(--lwt-header-image, var(--lwt-additional-images)) !important;
}
:root[uidensity="compact"] #PersonalToolbar {
  --toolbarbutton-outer-padding: 1px !important;
}
#PlacesToolbarItems > .bookmark-item,
#OtherBookmarks,
#PersonalToolbar > #import-button {
  padding-block: var(--uc-bm-padding) !important;
}

#nav-bar:focus-within + #PersonalToolbar {
  transition-delay: 10ms !important;
  transform: rotateX(var(--uc-autohide-toolbar-focus-rotation, 0));
}
#navigator-toolbox:is(:hover, :focus-within) {
  border-bottom-color: transparent !important;
}
#navigator-toolbox:hover > #PersonalToolbar {
  transition-delay: 10ms !important;
  transform: rotateX(var(--uc-autohide-toolbar-hover-rotation, 0));
}

#navigator-toolbox:hover > #nav-bar:focus-within + #PersonalToolbar {
  transform: rotateX(0);
}
#navigator-toolbox {
  --browser-area-z-index-toolbox: 4;
}
/* Uncomment to enable compatibility for multi-row_bookmarks.css */
/* This would break buttons placed in the toolbar but that is likely not happening if you are using multi-row setup  */
/*
#PersonalToolbar:not([customizing]){
  min-height: 0 !important;
  margin-bottom: 0;
  height: 0;
  overflow-y: visible !important;
  z-index: 2;
  padding-inline: 0 !important;
}
#personal-bookmarks{
  background: inherit;
  height: min-content;
}
#PlacesToolbarDropIndicatorHolder{
  pointer-events: none !important;
}
*/

/* SIDEBERY AND LATERAL TABS */

/* To remove the sidebar header entirely */
#sidebar-header {
  display: none;
}

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */

#sidebar-box {
  --uc-sidebar-width: 40px;
  --uc-sidebar-hover-width: 210px;
  --uc-autohide-sidebar-delay: 300ms; /* Wait 0.6s before hiding sidebar */
  --uc-autohide-transition-duration: 115ms;
  --uc-autohide-transition-type: linear;
  --browser-area-z-index-sidebar: 3;
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index: var(--browser-area-z-index-sidebar, 3);
}
#sidebar-box[positionend] {
  direction: rtl;
}
#sidebar-box[positionend] > * {
  direction: ltr;
}

#sidebar-box[positionend]:-moz-locale-dir(rtl) {
  direction: ltr;
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) > * {
  direction: rtl;
}

#main-window[sizemode="fullscreen"] #sidebar-box {
  --uc-sidebar-width: 1px;
}

#sidebar-splitter {
  display: none;
}

#sidebar-header {
  overflow: hidden;
  color: var(--chrome-color, inherit) !important;
  padding-inline: 0 !important;
}

#sidebar-header::before,
#sidebar-header::after {
  content: "";
  display: flex;
  padding-left: 8px;
}

#sidebar-header,
#sidebar {
  transition: min-width var(--uc-autohide-transition-duration)
    var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}
#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar {
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important;
}

.sidebar-panel {
  background-color: transparent !important;
  color: var(--newtab-text-primary-color) !important;
}

.sidebar-panel #search-box {
  -moz-appearance: none !important;
  background-color: rgba(249, 249, 250, 0.1) !important;
  color: inherit !important;
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header {
  background-color: inherit !important;
  border-inline: 1px solid rgb(80, 80, 80);
  border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[positionend] > * {
  border-inline-width: 1px 0px;
}

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel {
  inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label {
  margin-inline: 0px !important;
  border-left-style: solid !important;
}

/* HIDE NAVBAR WHEN SIDEBAR TOGGLED */
/* Source: https://gist.github.com/AnPerello/bf6441165b699dc4ef29bc057c924e02*/

#main-window[titlepreface*=" "] #TabsToolbar {
  visibility: collapse;
}
/* Auto hide horizontal tab */
#main-window #titlebar {
  overflow: hidden;
  transition: height 0.3s 0.3s !important;
}
/* Default state: Set initial height to enable animation */
#main-window #titlebar {
  height: 3em !important;
}
#main-window[uidensity="touch"] #titlebar {
  height: 3.35em !important;
}
#main-window[uidensity="compact"] #titlebar {
  height: 2.7em !important;
}
/* Hidden state: Hide native tabs strip */
#main-window[titlepreface*=" "] #titlebar {
  height: 0 !important;
}
/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*=" "] #tabbrowser-tabs {
  z-index: 0 !important;
}

/*Reference https://www.userchrome.org/*/
/* Hide title bar but keep window controls (minimize, maximize, close) */
/*Hide tabs and other things inside the titlebar, except window buttons*/
#main-window[titlepreface*=" "] .tabbrowser-tab {
  display: none !important;
}
#main-window[titlepreface*=" "] .scrollbox-clip {
  width: 0 !important;
}
#main-window[titlepreface*=" "] #alltabs-button {
  display: none !important;
}
#main-window[titlepreface*=" "] .toolbar-items {
  display: none !important;
}
/*Make sure that the titlebar and navbar are both on the same line*/
/*#main-window[titlepreface*=" "] #navigator-toolbox{  display: flex !important; box-sizing: border-box; justify-content:space-between; flex-direction: row-reverse;   flex-wrap: wrap; }*/
#main-window[titlepreface*=" "] .titlebar-spacer {
  display: none !important;
}
#main-window[titlepreface*=" "] #nav-bar {
  border-radius: 5px 0 0 0;
  display: flex;
  box-sizing: border-box;
  padding-top: 2px;
  align-items: center;
  flex: 1;
  flex-basis: 50%;
  width: 100% !important;
}
/* on GNOME you can use max-width: 48px below, if you only have the "Close" button on windows (default) */
#main-window[titlepreface*=" "] #titlebar {
  border-radius: 0 5px 0 0;
  border-left: none !important;
  margin-top: 1px;
  flex: 1;
  flex-basis: 50%;
  width: 10% !important;
  display: flex;
  max-width: 100px;
  align-items: center;
  background-color: var(--toolbar-bgcolor) !important;
  border-left: 1px solid var(--toolbar-color);
}
#main-window[titlepreface*=" "] #titlebar:-moz-window-inactive {
  opacity: 1 !important;
}
#main-window[titlepreface*=" "]
  #TabsToolbar
  > *:not(.titlebar-buttonbox-container) {
  display: none !important;
}
#main-window[titlepreface*=" "] .titlebar-buttonbox-container {
  display: flex !important;
  box-sizing: border-box;
  justify-content: space-between;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

@giordiemk I suggest you to remove the snippets you don't need to clear the code. However, that's my userChrome.css: https://gist.github.com/AnPerello/bf6441165b699dc4ef29bc057c924e02 Try using it as template and then add your presonal snippets.

(P.S. I'm using Linux on GNOME, it can also be a Windows-only problem)

Thanks for sharing! your .css worked as I wanted! 👯

Does anyone know how to hide/disable the tab's audio button?

/*AUTO HIDE BOOKMARKS

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_bookmarks_toolbar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

#PersonalToolbar {
  --uc-bm-height: 20px; /* Might need to adjust if the toolbar has other buttons */
  --uc-bm-padding: 4px; /* Vertical padding to be applied to bookmarks */
  --uc-autohide-toolbar-delay: 450ms; /* The toolbar is hidden after 0.6s */

  /* 0deg = "show" ; 90deg = "hide" ;  Set the following to control when bookmarks are shown */
  --uc-autohide-toolbar-focus-rotation: 0deg; /* urlbar is focused */
  --uc-autohide-toolbar-hover-rotation: 0deg; /* cursor is over the toolbar area */
}


/* SIDEBERY AND LATERAL TABS */

/* To remove the sidebar header entirely */
#sidebar-header {
  display: none;
}

/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/autohide_sidebar.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Show sidebar only when the cursor is over it  */
/* The border controlling sidebar width will be removed so you'll need to modify these values to change width */

#sidebar-box {
  --uc-sidebar-width: 40px;
  --uc-sidebar-hover-width: 210px;
  --uc-autohide-sidebar-delay: 300ms; /* Wait 0.6s before hiding sidebar */
  --uc-autohide-transition-duration: 115ms;
  --uc-autohide-transition-type: linear;
  --browser-area-z-index-sidebar: 3;
  position: relative;
  min-width: var(--uc-sidebar-width) !important;
  width: var(--uc-sidebar-width) !important;
  max-width: var(--uc-sidebar-width) !important;
  z-index: var(--browser-area-z-index-sidebar, 3);
}
#sidebar-box[positionend] {
  direction: rtl;
}
#sidebar-box[positionend] > * {
  direction: ltr;
}

#sidebar-box[positionend]:-moz-locale-dir(rtl) {
  direction: ltr;
}
#sidebar-box[positionend]:-moz-locale-dir(rtl) > * {
  direction: rtl;
}

#main-window[sizemode="fullscreen"] #sidebar-box {
  --uc-sidebar-width: 1px;
}

#sidebar-splitter {
  display: none;
}

#sidebar-header {
  overflow: hidden;
  color: var(--chrome-color, inherit) !important;
  padding-inline: 0 !important;
}

#sidebar-header::before,
#sidebar-header::after {
  content: "";
  display: flex;
  padding-left: 8px;
}

#sidebar-header,
#sidebar {
  transition: min-width var(--uc-autohide-transition-duration)
    var(--uc-autohide-transition-type) var(--uc-autohide-sidebar-delay) !important;
  min-width: var(--uc-sidebar-width) !important;
  will-change: min-width;
}
#sidebar-box:hover > #sidebar-header,
#sidebar-box:hover > #sidebar {
  min-width: var(--uc-sidebar-hover-width) !important;
  transition-delay: 0ms !important;
}

.sidebar-panel {
  background-color: transparent !important;
  color: var(--newtab-text-primary-color) !important;
}

.sidebar-panel #search-box {
  -moz-appearance: none !important;
  background-color: rgba(249, 249, 250, 0.1) !important;
  color: inherit !important;
}

/* Add sidebar divider and give it background */

#sidebar,
#sidebar-header {
  background-color: inherit !important;
  border-inline: 1px solid rgb(80, 80, 80);
  border-inline-width: 0px 1px;
}

#sidebar-box:not([positionend]) > :-moz-locale-dir(rtl),
#sidebar-box[positionend] > * {
  border-inline-width: 1px 0px;
}

/* Move statuspanel to the other side when sidebar is hovered so it doesn't get covered by sidebar */

#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel {
  inset-inline: auto 0px !important;
}
#sidebar-box:not([positionend]):hover ~ #appcontent #statuspanel-label {
  margin-inline: 0px !important;
  border-left-style: solid !important;
}

/* HIDE NAVBAR WHEN SIDEBAR TOGGLED */
/* Source: https://gist.github.com/AnPerello/bf6441165b699dc4ef29bc057c924e02*/

#main-window[titlepreface*=" "] #TabsToolbar {
  visibility: collapse;
}

/*Reference https://www.userchrome.org/*/
/* Hide title bar but keep window controls (minimize, maximize, close) */
/*Hide tabs and other things inside the titlebar, except window buttons*/
#main-window[titlepreface*=" "] .tabbrowser-tab {
  display: none !important;
}
#main-window[titlepreface*=" "] .scrollbox-clip {
  width: 0 !important;
}
#main-window[titlepreface*=" "] #alltabs-button {
  display: none !important;
}
#main-window[titlepreface*=" "] .toolbar-items {
  display: none !important;
}
/*Make sure that the titlebar and navbar are both on the same line*/
/*#main-window[titlepreface*=" "] #navigator-toolbox{  display: flex !important; box-sizing: border-box; justify-content:space-between; flex-direction: row-reverse;   flex-wrap: wrap; }*/
#main-window[titlepreface*=" "] .titlebar-spacer {
  display: none !important;
}
#main-window[titlepreface*=" "] #nav-bar {
  border-radius: 5px 0 0 0;
  display: flex;
  box-sizing: border-box;
  padding-top: 2px;
  align-items: center;
  flex: 1;
  flex-basis: 50%;
  width: 100% !important;
}
/* on GNOME you can use max-width: 48px below, if you only have the "Close" button on windows (default) */
#main-window[titlepreface*=" "] #titlebar {
  border-radius: 0 5px 0 0;
  border-left: none !important;
  margin-top: 1px;
  flex: 1;
  flex-basis: 50%;
  width: 10% !important;
  display: flex;
  max-width: 100px;
  align-items: center;
  background-color: var(--toolbar-bgcolor) !important;
  border-left: 1px solid var(--toolbar-color);
}
#main-window[titlepreface*=" "] #titlebar:-moz-window-inactive {
  opacity: 1 !important;
}
#main-window[titlepreface*=" "]
  #TabsToolbar
  > *:not(.titlebar-buttonbox-container) {
  display: none !important;
}
#main-window[titlepreface*=" "] .titlebar-buttonbox-container {
  display: flex !important;
  box-sizing: border-box;
  justify-content: space-between;
  flex-direction: row-reverse;
  flex-wrap: wrap;
}

#TabsToolbar
{
    visibility: collapse;
}

/* Hide the mute/unmute button */
.tab-icon-overlay:not([sharing], [crashed]):is([soundplaying], [muted]) {
    display: none !important;
}

I've found this solution by commenting out the line

#main-window[titlepreface*="XXX"] #navigator-toolbox{  
display: flex !important; box-sizing: border-box; justify-content:space-between; flex-direction: row-reverse;   flex-wrap: wrap; }

and modifying your line to:

#main-window[titlepreface*="XXX"] .titlebar-buttonbox-container  { 
display: flex !important; 
box-sizing: border-box; 
justify-content:space-between; 
flex-direction: row-reverse;   
flex-wrap: wrap; 
}

Looks like it worked with those changes.

@AnPerello I applied the changes you suggest but the three buttons don't appear.

/**
 * auto-hide the "classic" horizontal tab toolbar entirely
 */
#main-window[titlepreface*="⠀"] #TabsToolbar {
	visibility: collapse;
}

/**
 * decrease the size of the sidebar header
 */
#sidebar-header {
	font-size: 1.2em !important;
	padding: 2px 6px 2px 3px !important;
}

#sidebar-header #sidebar-close {
	padding: 3px !important;
}

#sidebar-header #sidebar-close .toolbarbutton-icon {
	width: 14px !important;
	height: 14px !important;
	opacity: 0.6 !important;
}

/**
 * remove the sidebar header entirely
 */
#sidebar-header {
	display: none;
}

/**
 * auto-hide the tab sidebar
 */
#sidebar-header {
	/* display: none; */
	visibility: collapse !important;
}

/* Hide splitter */
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]+#sidebar-splitter {
	display: none !important;
}

/* Shrink sidebar until hovered */
:root {
	--thin-tab-width: 32px;
	--wide-tab-width: 300px;
}

#sidebar-box:not([sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]) {
	min-width: var(--wide-tab-width) !important;
	max-width: none !important;
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] {
	overflow: hidden !important;
	position: relative !important;
	transition: all 300ms !important;
	/*transition: all 0ms 0s !important;*/
	min-width: var(--thin-tab-width) !important;
	max-width: var(--thin-tab-width) !important;
	z-index: 2;
	/* tolgo questa proprietà perchè altrimenti la sidebar va sopra la bookmark toolbar*/
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"] #sidebar {
	/*transition-delay: 0s !important;*/
	transition: all 300ms !important;
	min-width: var(--wide-tab-width) !important;
	max-width: var(--wide-tab-width) !important;
	z-index: 3;
	/* tolgo questa proprietà perchè altrimenti la sidebar va sopra la bookmark toolbar*/
}

#sidebar-box[sidebarcommand="_3c078156-979c-498b-8990-85f7987dd929_-sidebar-action"]:hover {
	margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
}


/* Hidden state: Hide native tabs strip */
/*#main-window[titlepreface*="⠀"] #titlebar { height: 0 !important; }*/
/* Hidden state: Fix z-index of active pinned tabs */
#main-window[titlepreface*="⠀"] #tabbrowser-tabs {
	z-index: 0 !important;
}


/**
 * window close button
 */
/*Reference https://www.userchrome.org/*/
/* Hide title bar but keep window controls (minimize, maximize, close) */
/*Hide tabs and other things inside the titlebar, except window buttons*/
#main-window[titlepreface*="⠀"] .tabbrowser-tab {
	display: none !important;
}

#main-window[titlepreface*="⠀"] .scrollbox-clip {
	width: 0 !important;
}

#main-window[titlepreface*="⠀"] #alltabs-button {
	display: none !important;
}

#main-window[titlepreface*="⠀"] .toolbar-items {
	display: none !important;
}

/*Make sure that the titlebar and navbar are both on the same line*/
/*#main-window[titlepreface*="⠀"] #navigator-toolbox {
	display: flex !important;
	box-sizing: border-box;
	justify-content: space-between;
	flex-direction: row-reverse;
	flex-wrap: wrap;
}*/

#main-window[titlepreface*="⠀"] .titlebar-spacer {
	display: none !important;
}

#main-window[titlepreface*="⠀"] #nav-bar {
	border-radius: 5px 0 0 0;
	display: flex;
	box-sizing: border-box;
	padding-top: 2px;
	align-items: center;
	flex: 1;
	flex-basis: 50%;
	width: 100% !important;
}

#main-window[titlepreface*="⠀"] #TabsToolbar>*:not(.titlebar-buttonbox-container) {
	display: none !important;
}

#main-window[titlepreface*=" "] .titlebar-buttonbox-container  {
	display: flex !important;
	box-sizing: border-box;
	justify-content:space-between;
	flex-direction: row-reverse;
	flex-wrap: wrap;
}


#PersonalToolbar {
	width: 100% !important;
}

#tab-notification-deck {
	width: 100% !important;
	flex-basis: 100%;
	width: 100% !important;
}

@ScarletEmanu try using my userChrome.css (https://gist.github.com/AnPerello/bf6441165b699dc4ef29bc057c924e02) as a base and then you add your own snippets

Hi everyone, despite using @AnPerello's userChrome file, the sidebar is not collapsed and the normal (horizontal) toolbar is still showing.
Using a Macbook Air M1.

@AlbertoLupatin it seems like no snippet is working. Did you put userChrome.css in the right position?

@AlbertoLupatin it seems like no snippet is working. Did you put userChrome.css in the right position?

Got it, Firefox doesn't automatically open the Profile folder, but its parent one. Thanks!