See:

• https://searchfox.org/mozilla-release/source/browser/base/content/browser.css#1481

Override the existing rules by adding the !important flag.

#sidebar-box {
	min-width: 14em;
	max-width: 36em;
	width: 18em;
}

much appreciated!

this doesn't appear to be working either which suggests that the issue is this end

ff 113.0.2 (x64) win 10

the search box might be forcing the re-size css to fail?

(the image is an example of the many combinations attempted)

I'm not sure what width you want as 3em is rather small and you won't see much. The code works for me.

In Windows saving the file is usually the only time things get more complicated because Windows can silently add a .txt file extension and you end up with a file named userChrome.css.txt. To avoid this you need to make sure to select "All files" in the dialog to save the file in the text editor using "Save File as".

You need to close (Quit/Exit) and restart Firefox when you create or modify the userChrome.css file.

More info about userChrome.css/userContent.css in case you are not familiar: *https://www.userchrome.org/what-is-userchrome-css.html

• https://www.userchrome.org/how-create-userchrome-css.html
• https://www.userchrome.org/firefox-changes-userchrome-css.html

In Firefox 69 and later you need to set this pref to true on the about:config page to enable userChrome.css and userContent.css in the chrome folder.

• about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true
• https://support.mozilla.org/en-US/kb/about-config-editor-firefox

ah ok, didn't know about the config being set to true so that's for that : )

the resizing has however, caused a new search for another setting in the userChrome file

in the image below, resizing the sidebar causes the 'tab's close icon' to hover over the tab, making it impossible to navigate through the sidebar tabs

removing the text from the tab(s) in the sidebar

removing the close tab function/icon from the sidebar [edit] solved

update: just in-case this is useful for anyone else, i've managed to complete the task at hand

I installed a few add-ons sidebery => https://addons.mozilla.org/en-US/firefox/addon/sidebery/ new tab button => https://addons.mozilla.org/en-US/firefox/addon/new-tab-button-we/ close tab button => https://addons.mozilla.org/en-US/firefox/addon/close-the-tab-button/

i set the about:config to be able to read the userChrome.css file about:config => toolkit.legacyUserProfileCustomizations.stylesheets = true

i used the sidebar settings to remove the 'close tab' function

sidebar settings => tab => show close button on mouse over 'off'

this is the css from the image

/* makes sidebar adjustable */

1. sidebar-box {

min-width: 1em !important; max-width: 36em !important; }

/* hides the native tabs */

1. TabsToolbar {

 visibility: collapse;

} /* leaves space for the window buttons */

1. nav-bar {

   margin-top: -8px;
   margin-right: 74px;
   margin-bottom: -4px;

}

Thanks to the support from cor-el!

the image show the browser using the sidebar to navigate open tabs, removes the default tabs from the top of the page and creates 3 separate panels to house each open tab