How to Set Sidebar Height to Full Window Height and Adjust the Navbar Dynamically?

[kavin-kr]

I'm using custom userChrome.css in Firefox to remove the tabs bar as mentioned in the Sidebery's Wiki and hide the minimize, maximize, and close buttons.

Current userChrome.css config 👇🏻

/* 1. Import MrOtherGuy/firefox-csshacks lib files */

/* Hide tabs bar */
@import url(chrome/hide_tabs_toolbar.css);
@import url(chrome/hide_tabs_toolbar_osx.css);
@import url(chrome/window_control_placeholder_support.css);

/* 2. Apply custom modifications after imports */

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

/* Hide toolbar buttons for mininmize, maximize and close */
toolbarbutton.titlebar-button {
  display: none !important;
}

/* Extend nav bar to fill hidden titlebar buttons space on right side */
#nav-bar {
  border-right-width: 0 !important;
}

Firefox UI for above config 👇🏻

---

How to

• Make the sidebar-box extend to the full height of the browser window.
• Position the navigator-toolbox to start after the sidebar-box + sidebar-splitter width.
• Ensure the setup is responsive. When the sidebar width changes or is hidden, the navigator-toolbox should automatically adjust its position and size.

Expected Firefox UI 👇🏻

Firefox version: 115.7.0
Sidebery version: 5.2.0