Issue with CSS code snippets from the Wiki

[ItwasamiiDio]

Update

Changed the file to this:

/* Hide horizontal tabs at the top of the window */

#tabbrowser-tabs {
  visibility: collapse !important;
}

	/*Move Minimize/Restore/Close window buttons to the right of Hamburger menu (after hiding horizontal tabs)*/

/* Adding empty space for buttons */

#nav-bar {
	margin-right:140px;
}

/* 15px for dragging whole window by mouse*/

#titlebar {
	appearance: none !important;
	height: 15px;
}

/* Fix for main menu calling by Alt button */

#titlebar > #toolbar-menubar {
	margin-top: 10px;
}

/* Move minimize/restore/close buttons to empty space */

#TabsToolbar > .titlebar-buttonbox-container {
	display: block;
	position: absolute;
	top: 17 px;
	right: 1px;
}

	/* Hide the "Tree Style Tab" header at the top of the sidebar*/

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

	/*Auto-show/hide sidebar by mouseover (hover)*/

/*Collapse in default state and add transition*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  overflow: hidden;
  min-width: 40px !important;
  max-width: 40px !important;
  transition: all 0.2s ease;
  border-right: 1px solid #0c0c0d;
  z-index: 2;
}

/*Expand to 260px on hover*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  min-width: 260px !important;
  max-width: 260px !important;
  z-index: 1;
}

Now I can't drag the Window because there's not enough space to grab it. Any ideas how to fix that

Old Problem

Any way to fix this thing that suddenly happened with my browser?

This is my UserChrome.css file:

#main-window[tabsintitlebar="true"]:not([extradragspace="false"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

/* Adding empty space for buttons */

#nav-bar {
	margin-right:140px;
}

/* 15px for dragging whole window by mouse*/

#titlebar {
	appearance: none !important;
	height: 15 px;
}

/* Fix for main menu calling by Alt button */

#titlebar > #toolbar-menubar {
	margin-top: 10px;
}

/* Move minimize/restore/close buttons to empty space */

#TabsToolbar > .titlebar-buttonbox-container {
	display: block;
	position: absolute;
	top: 17 px;
	right: 1px;
}
	/* Hide the "Tree Style Tab" header at the top of the sidebar*/

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

/*Auto-show/hide sidebar by mouseover (hover)*/

/*Collapse in default state and add transition*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  overflow: hidden;
  min-width: 40px !important;
  max-width: 40px !important;
  transition: all 0.2s ease;
  border-right: 1px solid #0c0c0d;
  z-index: 2;
}

/*Expand to 260px on hover*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  min-width: 260px !important;
  max-width: 260px !important;
  z-index: 1;
}

Not sure exactly what happened, but my browser started showing up like this. I'm using code snippets for the Wiki and they were working fine for more than a year, only for it to start showing like this. The intended effect is to have the Minimize, Restore, and Close buttons in the space left by one of the code snippets without all the empty space.

[irvinm]

You can insert flexible space that is grab-able in the "Customize Toolbar" option.

[lazarnerd]

the following userChrome.css config fixed auto hide tabs & moving minimize, maximize & close buttons to the right of the hamburger menu:

/* Hide main tabs toolbar */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
    opacity: 0;
    pointer-events: none;
}
#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

/* Sidebar min and max width removal */
#sidebar-box {
    max-width: none !important;
    min-width: 0px !important;
}
/* Hide splitter, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] + #sidebar-splitter {
    display: none !important;
}
/* Hide sidebar header, when using Tree Style Tab. */
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
    visibility: collapse;
}

/* Shrink sidebar until hovered, when using Tree Style Tab. */
:root {
    --thin-tab-width: 30px;
    --wide-tab-width: 200px;
}
#sidebar-box:not([sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]) {
    min-width: var(--wide-tab-width) !important;
    max-width: none !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
    position: relative !important;
    transition: all 100ms !important;
    min-width: var(--thin-tab-width) !important;
    max-width: var(--thin-tab-width) !important;
}
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover {
    transition: all 200ms !important;
    transition-delay: 0.2s !important;
    min-width: var(--wide-tab-width) !important;
    max-width: var(--wide-tab-width) !important;
    margin-right: calc((var(--wide-tab-width) - var(--thin-tab-width)) * -1) !important;
    z-index: 999 !important;
}
/* Adding empty space for buttons */
#nav-bar {
    margin-top: -45px;
	margin-right: 150px;
}

/* 15px for dragging whole window by mouse*/
#titlebar {
	appearance: none !important;
	height: 0px;
}

/* Fix for main menu calling by Alt button */
#titlebar > #toolbar-menubar {
	margin-top: 0px;
}

/* Move minimize/restore/close buttons to empty space */
#TabsToolbar > .titlebar-buttonbox-container {
	display: block;
	position: absolute;
	top: 7px !important;
    bottom: 0px !important;
	right: 1px;
}

[ItwasamiiDio]

Fixed it to my liking with the following code

/* Hide horizontal tabs at the top of the window */
#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar > .toolbar-items {
  opacity: 0;
  pointer-events: none;
}

#main-window:not([tabsintitlebar="true"]) #TabsToolbar {
    visibility: collapse !important;
}

#main-window[tabsintitlebar="true"]:not([extradragspace="true"]) #TabsToolbar {
  height: 0px; /* Set the height to 0 to hide the tab bar */
  margin-top: -35px; /* Shift the content up by 50px */
}

    /* Adding empty space for buttons */

#nav-bar {
    margin-right:140px;
}

#TabsToolbar > .titlebar-buttonbox-container {
  display: block;
  position: absolute;
  top: 15px;
  right: 0px;
}

    /* Hide the "Tree Style Tab" header at the top of the sidebar*/

#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar-header {
  display: none;
}

    /*Auto-show/hide sidebar by mouseover (hover)*/

/*Collapse in default state and add transition*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] {
  overflow: hidden;
  min-width: 40px !important;
  max-width: 40px !important;
  transition: all 0.2s ease;
  border-right: 1px solid #0c0c0d;
  z-index: 2;
}

/*Expand to 260px on hover*/
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"]:hover,
#sidebar-box[sidebarcommand="treestyletab_piro_sakura_ne_jp-sidebar-action"] #sidebar {
  min-width: 260px !important;
  max-width: 260px !important;
  z-index: 1;
}

Looks like this, with minimal space to grab the window