Sidebar toggle is hard to discover and find visually #589

New Issue

GiteaMirror · 2025-11-11T14:26:57-06:00

GiteaMirror commented

2025-11-11 14:26:57 -06:00

Originally created by @theasp on GitHub (Apr 4, 2024).

Bug Report

Description

Bug Summary:
The toggle button for the sidebar in it's non hover state is hard to discover, especially on a phone. It is also hard to find when the sidebar is open and overlaps the text.

I'm using the following patch which I could make a PR for if desired. It removes the shape changing when hovering and makes the arrow slightly pointier.

diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte
index 445dc92..786a5bb 100644
--- a/src/lib/components/layout/Sidebar.svelte
+++ b/src/lib/components/layout/Sidebar.svelte
@@ -726,13 +726,13 @@
                                                <div class="flex h-6 w-6 flex-col items-center">
                                                        <div
                                                                class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[0.15rem] {show
-                                                                       ? 'group-hover:rotate-[15deg]'
-                                                                       : 'group-hover:rotate-[-15deg]'}"
+                                                                       ? 'rotate-[22.5deg]'
+                                                                       : 'rotate-[-22.5deg]'}"
                                                        />
                                                        <div
                                                                class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[-0.15rem] {show
-                                                                       ? 'group-hover:rotate-[-15deg]'
-                                                                       : 'group-hover:rotate-[15deg]'}"
+                                                                       ? 'rotate-[-22.5deg]'
+                                                                       : 'rotate-[22.5deg]'}"
                                                        />
                                                </div>
                                        </div>

Steps to Reproduce:

Main screen of the app, the toggle button for the sidebar on the left either beside the sidebar or the edge of the screen depending on the sidebar state. It appears as a small vertical bar unless you hover over it.

Expected Behavior:

Button clearly depicts it's action.

Actual Behavior:

There is a grey vertical bar that turns into arrows when you hover over it. It took me a month to figure out how to open the sidebar when I first started using Open WebUI on my phone.

Environment

Operating System: Debian 12, Ubuntu 22.04, Android 14
Browser (if applicable): Chrome

Reproduction Details

Confirmation:

I have read and followed all the instructions provided in the README.md.
I am on the latest version of both Open WebUI and Ollama.
I have included the browser console logs.
I have included the Docker container logs.

Logs and Screenshots

Browser Console Logs:
N/A

Docker Container Logs:
N/A

Screenshots (if applicable):

Installation Method

Docker

Additional Information

None

Note

If the bug report is incomplete or does not follow the provided instructions, it may not be addressed. Please ensure that you have followed the steps outlined in the README.md and troubleshooting.md documents, and provide all necessary information for us to reproduce and address the issue. Thank you!

Originally created by @theasp on GitHub (Apr 4, 2024). # Bug Report ## Description **Bug Summary:** The toggle button for the sidebar in it's non hover state is hard to discover, especially on a phone. It is also hard to find when the sidebar is open and overlaps the text. I'm using the following patch which I could make a PR for if desired. It removes the shape changing when hovering and makes the arrow slightly pointier. ```diff diff --git a/src/lib/components/layout/Sidebar.svelte b/src/lib/components/layout/Sidebar.svelte index 445dc92..786a5bb 100644 --- a/src/lib/components/layout/Sidebar.svelte +++ b/src/lib/components/layout/Sidebar.svelte @@ -726,13 +726,13 @@ <div class="flex h-6 w-6 flex-col items-center"> <div class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[0.15rem] {show - ? 'group-hover:rotate-[15deg]' - : 'group-hover:rotate-[-15deg]'}" + ? 'rotate-[22.5deg]' + : 'rotate-[-22.5deg]'}" /> <div class="h-3 w-1 rounded-full bg-[#0f0f0f] dark:bg-white rotate-0 translate-y-[-0.15rem] {show - ? 'group-hover:rotate-[-15deg]' - : 'group-hover:rotate-[15deg]'}" + ? 'rotate-[-22.5deg]' + : 'rotate-[22.5deg]'}" /> </div> </div> ``` **Steps to Reproduce:** Main screen of the app, the toggle button for the sidebar on the left either beside the sidebar or the edge of the screen depending on the sidebar state. It appears as a small vertical bar unless you hover over it. **Expected Behavior:** Button clearly depicts it's action. **Actual Behavior:** There is a grey vertical bar that turns into arrows when you hover over it. It took me a month to figure out how to open the sidebar when I first started using Open WebUI on my phone. ## Environment - **Operating System:** Debian 12, Ubuntu 22.04, Android 14 - **Browser (if applicable):** Chrome ## Reproduction Details **Confirmation:** - [X] I have read and followed all the instructions provided in the README.md. - [X] I am on the latest version of both Open WebUI and Ollama. - [X] I have included the browser console logs. - [X] I have included the Docker container logs. ## Logs and Screenshots **Browser Console Logs:** N/A **Docker Container Logs:** N/A **Screenshots (if applicable):** ## Installation Method Docker ## Additional Information None ## Note If the bug report is incomplete or does not follow the provided instructions, it may not be addressed. Please ensure that you have followed the steps outlined in the README.md and troubleshooting.md documents, and provide all necessary information for us to reproduce and address the issue. Thank you!

GiteaMirror closed this issue

2025-11-11 14:26:57 -06:00

GiteaMirror referenced this issue

2026-04-19 18:56:35 -05:00

[GH-ISSUE #589] WEBUI Model Selection does not persist firefox Linux #12132

GiteaMirror referenced this issue

2026-04-25 02:24:13 -05:00

[GH-ISSUE #589] WEBUI Model Selection does not persist firefox Linux #27660

GiteaMirror referenced this issue

2026-05-05 11:14:27 -05:00

[GH-ISSUE #589] WEBUI Model Selection does not persist firefox Linux #50797

GiteaMirror referenced this issue