[GH-ISSUE #9054] Scrollbar on chat window is almost invisible and way to small #15370

New Issue

GiteaMirror · 2026-04-19T21:36:13-05:00

GiteaMirror commented

2026-04-19 21:36:13 -05:00

Originally created by @le-patenteux on GitHub (Jan 28, 2025).
Original GitHub issue: https://github.com/open-webui/open-webui/issues/9054

Installation Method

Docker-compose, from official documentation

Environment

Open WebUI Version:
0.5.7
Operating System:
Linux - Ubuntu server 22.04
Browser (if applicable):
Brave and chromium based browsers
Firefox: Contrast is okay, but width is still an issue

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. -- If relevant, I will post them
I have included the Docker container logs. -- Not relevant
I have provided the exact steps to reproduce the bug in the "Steps to Reproduce" section below.

Expected Behavior:

Have a normal sized scrollbar with a contrasted cursor to be able to locate it.

Actual Behavior:

Minuscule scrollbar (hard to click) with almost invisible cursor.

Description

Bug Summary:

As the title says, my users and myself find it really annoying when trying to navigate long conversations that the cursor on the scrollbar is nearly invisible (not enough contrast between the cursor and the bar itself), combined with the fact that the scrollbar itself is minuscule and nearly impossible to locate.

The contrast affects Chromium based browsers only in my testing. The width is an issue on all browsers.

Reproduction Details

Steps to Reproduce:

Exist in the physical realm of this world, use open-webui, find the scrollbar unpractical.
(I tried fresh local deployment and have the same issue with the scrollbars)

Logs and Screenshots

Browser Console Logs:
I think it is unrelevant, but feel free to correct me it you need them!

Docker Container Logs:
I think it is unrelevant, but feel free to correct me it you need them!

Screenshots/Screen Recordings (if applicable):

Light UI, Brave-Browser (or any chromium based)

Dark UI, Brave-Browser (or any chromium based)
I promise the cursor is there... I can almost not see it even on an HDR display

Firefox, contrast is okay, but scrollbar is still minuscule

Additional Information

This project is amazing and I am grateful for the hard work made by this community.
With a dev friend, we will try and edit the css to suggest a fix to this issue, but I can't promise we will be able to do so. That is why I am opening this issue, in case someone faster than us can fix it before we do. And if we do, we will suggest the fix ourselves as a resolution to this issue tracker. (sorry, I am new to this!)

Originally created by @le-patenteux on GitHub (Jan 28, 2025). Original GitHub issue: https://github.com/open-webui/open-webui/issues/9054 ## Installation Method Docker-compose, from official documentation ## Environment - **Open WebUI Version:** 0.5.7 - **Operating System:** Linux - Ubuntu server 22.04 - **Browser (if applicable):** Brave and chromium based browsers Firefox: Contrast is okay, but width is still an issue **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. - [ ] I have included the browser console logs. -- **_If relevant, I will post them_** - [ ] I have included the Docker container logs. -- _**Not relevant**_ - [x] I have provided the exact steps to reproduce the bug in the "Steps to Reproduce" section below. ## Expected Behavior: Have a normal sized scrollbar with a contrasted cursor to be able to locate it. ## Actual Behavior: Minuscule scrollbar (hard to click) with almost invisible cursor. ## Description **Bug Summary:** As the title says, my users and myself find it really annoying when trying to navigate long conversations that the cursor on the scrollbar is nearly invisible (not enough contrast between the cursor and the bar itself), combined with the fact that the scrollbar itself is minuscule and nearly impossible to locate. The contrast affects Chromium based browsers only in my testing. The width is an issue on all browsers. ## Reproduction Details **Steps to Reproduce:** Exist in the physical realm of this world, use open-webui, find the scrollbar unpractical. (I tried fresh local deployment and have the same issue with the scrollbars) ## Logs and Screenshots **Browser Console Logs:** **_I think it is unrelevant, but feel free to correct me it you need them!_** **Docker Container Logs:** **_I think it is unrelevant, but feel free to correct me it you need them!_** **Screenshots/Screen Recordings (if applicable):** Light UI, Brave-Browser (or any chromium based) ![Image](https://github.com/user-attachments/assets/2c0530a4-8fd7-4825-aa20-7257c9c3e24a) Dark UI, Brave-Browser (or any chromium based) I promise the cursor is there... I can almost not see it even on an HDR display ![Image](https://github.com/user-attachments/assets/f660cb67-5e1b-4c5d-abbb-b939d2675af6) Firefox, contrast is okay, but scrollbar is still minuscule ![Image](https://github.com/user-attachments/assets/e883d345-e84b-435b-8f5e-f1e2368559a2) ## Additional Information This project is amazing and I am grateful for the hard work made by this community. With a dev friend, we will try and edit the css to suggest a fix to this issue, but I can't promise we will be able to do so. That is why I am opening this issue, in case someone faster than us can fix it before we do. And if we do, we will suggest the fix ourselves as a resolution to this issue tracker. (sorry, I am new to this!)

GiteaMirror closed this issue

2026-04-19 21:36:13 -05:00

GiteaMirror commented

2026-04-19 21:36:14 -05:00

@tjbck commented on GitHub (Jan 28, 2025):

Intended behaviour.

@tjbck commented on GitHub (Jan 28, 2025): Intended behaviour.

GiteaMirror commented

2026-04-19 21:36:15 -05:00

@le-patenteux commented on GitHub (Jan 28, 2025):

Intended behaviour.

How can unusable scrollbars be intended behavior?

I received complaints from 12 users today for that! (And I myself find it really annoying)

If this won't be fixed by the team, can you point me in the direction to patch it locally on our deployment? I did not find a menu or setting to activate "large scrollbars" either

@le-patenteux commented on GitHub (Jan 28, 2025): > Intended behaviour. How can unusable scrollbars be intended behavior? I received complaints from 12 users today for that! (And I myself find it really annoying) If this won't be fixed by the team, can you point me in the direction to patch it locally on our deployment? I did not find a menu or setting to activate "large scrollbars" either

GiteaMirror commented

2026-04-19 21:36:16 -05:00

@SkyblueMr commented on GitHub (Feb 23, 2025):

Intended behaviour. 预期的行为。

How can unusable scrollbars be intended behavior?不可用的滚动条如何是预期的行为？

I received complaints from 12 users today for that! (And I myself find it really annoying)我今天收到了12位用户的投诉！（我本人真的很烦人）

If this won't be fixed by the team, can you point me in the direction to patch it locally on our deployment? I did not find a menu or setting to activate "large scrollbars" either如果团队无法修复这一点，您能否指示我在我们的部署上对其进行修补的方向？我也找不到激活“大卷轴”的菜单或设置

Open the index.html file located in the Lib\site-packages\open_webui\frontend\ directory
Add the following code under the "" tag around line 80

<title>Open WebUI</title>

/* Scrollbar styling for .w-full element */
/* Firefox browser */
.w-full {
  scrollbar-width: thin;
  scrollbar-color: #cfdfe5 transparent; /* Specify scrollbar thumb and track colors */
}
/* For Webkit browsers (e.g., Chrome, Safari) */
.w-full::-webkit-scrollbar {
  width: 6px;
  height: 6px; /* Set horizontal scrollbar height */
}
.w-full::-webkit-scrollbar-track {
  background: transparent;
  border-radius: 10px; /* Round scrollbar track corners */
}
.w-full::-webkit-scrollbar-thumb {
  background: #cfdfe5; /* Customizable blue color */
  border-radius: 10px; /* Round scrollbar thumb corners */
}

Feel free to adjust the scrollbar colors as needed

@SkyblueMr commented on GitHub (Feb 23, 2025): > > Intended behaviour. 预期的行为。 > > How can unusable scrollbars be intended behavior?不可用的滚动条如何是预期的行为？ > > I received complaints from 12 users today for that! (And I myself find it really annoying)我今天收到了12位用户的投诉！（我本人真的很烦人） > > If this won't be fixed by the team, can you point me in the direction to patch it locally on our deployment? I did not find a menu or setting to activate "large scrollbars" either如果团队无法修复这一点，您能否指示我在我们的部署上对其进行修补的方向？我也找不到激活“大卷轴”的菜单或设置 Open the index.html file located in the Lib\site-packages\open_webui\frontend\ directory Add the following code under the "<title>Open WebUI</title>" tag around line 80 ```html <title>Open WebUI</title> /* Scrollbar styling for .w-full element */ /* Firefox browser */ .w-full { scrollbar-width: thin; scrollbar-color: #cfdfe5 transparent; /* Specify scrollbar thumb and track colors */ } /* For Webkit browsers (e.g., Chrome, Safari) */ .w-full::-webkit-scrollbar { width: 6px; height: 6px; /* Set horizontal scrollbar height */ } .w-full::-webkit-scrollbar-track { background: transparent; border-radius: 10px; /* Round scrollbar track corners */ } .w-full::-webkit-scrollbar-thumb { background: #cfdfe5; /* Customizable blue color */ border-radius: 10px; /* Round scrollbar thumb corners */ } ``` Feel free to adjust the scrollbar colors as needed

GiteaMirror commented

2026-04-19 21:36:17 -05:00

@le-patenteux commented on GitHub (Mar 12, 2025):

Open the index.html file located in the Lib\site-packages\open_webui\frontend\ directory Add the following code under the "" tag around line 80

Thanks a lot for taking the time...

I had to make some adjustments to the code, but it worked... My users instantly noticed and sent me messages about it!

My code:

            <style type="text/css" nonce="">

            /* Scrollbar styling for .w-full element */
            /* Firefox browser */
            .w-full {
              scrollbar-width: thin;
              scrollbar-color: #cfdfe5 transparent; /* Specify scrollbar thumb and track colors */
            }
            /* For Webkit browsers (e.g., Chrome, Safari) */
            .w-full::-webkit-scrollbar {
              width: 6px;
              height: 6px; /* Set horizontal scrollbar height */
            }
            .w-full::-webkit-scrollbar-track {
              background: transparent;
              border-radius: 10px; /* Round scrollbar track corners */
            }
            .w-full::-webkit-scrollbar-thumb {
              background: #cfdfe5; /* Customizable blue color */
              border-radius: 10px; /* Round scrollbar thumb corners */
            }
            </style>

@tjbck , I know you consider this "indended behavior", but when the users can't use a function because it is un-usable/un-accessible, and unanimously consider it an issue, the intended behavior needs to change!

Please consider modifying the index file to include more visibility of the scrollbars.

@le-patenteux commented on GitHub (Mar 12, 2025): > Open the index.html file located in the Lib\site-packages\open_webui\frontend\ directory Add the following code under the "<title>Open WebUI</title>" tag around line 80 Thanks a lot for taking the time... I had to make some adjustments to the code, but it worked... My users instantly noticed and sent me messages about it! My code: ```html <style type="text/css" nonce=""> /* Scrollbar styling for .w-full element */ /* Firefox browser */ .w-full { scrollbar-width: thin; scrollbar-color: #cfdfe5 transparent; /* Specify scrollbar thumb and track colors */ } /* For Webkit browsers (e.g., Chrome, Safari) */ .w-full::-webkit-scrollbar { width: 6px; height: 6px; /* Set horizontal scrollbar height */ } .w-full::-webkit-scrollbar-track { background: transparent; border-radius: 10px; /* Round scrollbar track corners */ } .w-full::-webkit-scrollbar-thumb { background: #cfdfe5; /* Customizable blue color */ border-radius: 10px; /* Round scrollbar thumb corners */ } </style> ``` @tjbck , I know you consider this "indended behavior", but when the users can't use a function because it is un-usable/un-accessible, and unanimously consider it an issue, the intended behavior needs to change! Please consider modifying the index file to include more visibility of the scrollbars.

GiteaMirror commented

2026-04-19 21:36:17 -05:00

@Classic298 commented on GitHub (Mar 12, 2025):

@le-patenteux you can open a PR and propose to change this instead of asking Tim to change it if you want it to be changed.

@Classic298 commented on GitHub (Mar 12, 2025): @le-patenteux you can open a PR and propose to change this instead of asking Tim to change it if you want it to be changed.

GiteaMirror commented

2026-04-19 21:36:18 -05:00

@VideoFX commented on GitHub (Feb 12, 2026):

I still have the invisible scrollbar.
Was this not merged finally?

@VideoFX commented on GitHub (Feb 12, 2026): I still have the invisible scrollbar. Was this not merged finally?

GiteaMirror commented

2026-04-19 21:36:18 -05:00

@hallcrash commented on GitHub (Feb 27, 2026):

I know this was a year ago, but I'd like to thank the OP for their code. I'd like to inform others that in a docker image it is possible to edit custom.css which lives in the folder /app/backend/open_webui/static of the official docker image. I suppose the best would be to to map that folder with the Host/volume persistent storage, or use the docker cp command to overwrite the /app/backend/open_webui/static/custom.css file with the code provided by the OP or your own custom code. The file is has no code by default (right now anyway). The latter method would need to be redone if the container is updated, because its not persistent storage.

@hallcrash commented on GitHub (Feb 27, 2026): I know this was a year ago, but I'd like to thank the OP for their code. I'd like to inform others that in a docker image it is possible to edit custom.css which lives in the folder /app/backend/open_webui/static of the official docker image. I suppose the best would be to to map that folder with the Host/volume persistent storage, or use the docker cp command to overwrite the /app/backend/open_webui/static/custom.css file with the code provided by the OP or your own custom code. The file is has no code by default (right now anyway). The latter method would need to be redone if the container is updated, because its not persistent storage.

Sign in to join this conversation.

Branches Tags

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: github-starred/open-webui#15370