The Open WebUI side bar is too narrow. I keep editing the css via “Inspect”, but it gets resrt when the page reloads. I found a way to persist across browser restarts and page refreshes.

My Setup:

  1. Open WebUI installed via Docker.
  2. Firefox v130 on macOS.

Steps to make the sidebar wider are as follows:

1. Locate Your Firefox Profile Folder

  1. Open Firefox and enter about:support in the address bar.
  2. Look for the “Profile Folder” entry.
  3. Click the “Open Folder” button next to it.
  4. Right click the xxxxxxx.default folder and choose New Terminal at Folder. OR
  5. On the path bar at the bottom of the Finder window, right-click the xxxxxxxx.default folder, and “Copy as Pathname”.

Note: The profile folder path typically looks like this: /Users/yourusername/Library/Application Support/Firefox/Profiles/xxxxxxxx.default where xxxxxxxx is a random string of characters.

2. Create the Chrome Folder

  1. If you didn’t choose New Terminal at Folder, open Terminal and navigate to your profile folder using the path you found in step 1. For example:
    cd '/Users/yourusername/Library/Application Support/Firefox/Profiles/xxxxxxxx.default'
  2. Create a new folder called “chrome”:
    mkdir chrome

Note: Don’t worry about the word “chrome”. It’s not related to the Google Chrome browser. In Firefox, “chrome” refers to the browser’s user interface elements.

3. Create the UserContent.css File

  1. In Terminal, create the userContent.css file with this command:
    touch chrome/userContent.css

4. Edit the UserContent.css File

  1. Open the userContent.css file with your preferred text editor (e.g., TextEdit, VSCode).
  2. Add this custom CSS and save the file.
    @-moz-document url-prefix("http://localhost:3000") {
  .w-\[260px\] {
    width: 320px !important;
  }
}

If your Open WebUI has a different URL, use that instead.

320px width is what I use; modify it to work for you.

Note: This CSS does the following:

  • @-moz-document url-prefix("http://localhost:3000"): This line ensures the CSS only applies to pages that start with the URL “http://localhost:3000 “.
  • .w-\[260px\]: This targets elements with the class w-[260px]. The backslash is used to escape the square bracket in the class name.
  • width: 320px !important;: This sets the width of the targeted elements to 320px. The !important flag ensures this rule takes precedence over any other width rules for this class.

You can use this file to modify CSS to target different URLs or elements, and change the CSS properties as needed for your specific use case.

5. Enable Custom CSS in Firefox

  1. In Firefox, type about:config in the address bar.
  2. Accept the warning if shown.
  3. Search for toolkit.legacyUserProfileCustomizations.stylesheets.
  4. Set its value to true by double-clicking on it.

6. Restart Firefox

  1. Quit Firefox completely.
  2. Reopen Firefox and go to Open WebUI.

✅ Your custom CSS should now be applied to Open WebUI across page refreshes and browser restarts.