Chat scrollbar is not responsive when pressed at the right edge of the viewport

[rotemdan]

Bug Report

Description

Bug Summary: When the mouse cursor is positioned at the very right edge of the viewport, pressing the left mouse button does not impact the scrollbar at all.

You can't operate it normally without "pixel-hunting" the exact bounding box (every time), which is frustrating (also since it's especially thin).

Steps to Reproduce:

1. Position cursor at the very right edge of the browser's viewport.
2. Press the left mouse button.

Expected Behavior: Should impact the scrollbar.

Actual Behavior: Doesn't impact the scrollbar.

Environment

• Open WebUI Version: v0.3.10

• Operating System: Windows 11

• Browser (if applicable): Brave 1.67.134 Chromium: 126.0.6478.186

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.

Installation Method

docker run -d -p 3000:8080 -e OPENAI_API_KEY=your_secret_key -v open-webui:/app/backend/data --name open-webui --restart always ghcr.io/open-webui/open-webui:main

Additional Information

This issue is has become a user experience plague recently. It's usually caused either by:

• Using a non-native scrollbar (usually JavaScript based) on the body or another element
• Using a scrollbar that's bounded on an inner element, like a DIV, instead of using the native BODY element's scrollbar, which should not create this problem (given there is no right margin). However, it seems like this doesn't always occur due to the inner element's scrollbar - for example see https://pi.ai/threads.

Notes

A few similar websites or services that are notorious for this issue:

• Claude desktop web UI (recently introduced! Used to be fine!)
• HuggingChat
• Poe.com
• Google Gemini desktop web UI
• Discord!
• Many others

A few chatbot UIs that are not suffering from this issue! (so much more usable!)

• ChatGPT
• Perplexity.ai
• Pi.ai

[rotemdan]

Update:

After further trial and error, it seems that on open-webui this issue occurs with some zoom levels but not with others.

For example, on my browser (latest Brave on Windows 11) it happens with a zoom level of 110%, but not with 100% or 125%.

I also tested other websites with the problem, but for a lot of them, like Claude.ai, HuggingChat and Poe.com but there the issue happened regardless of zoom level.

On Discord, changing the zoom level to something other than 125% also worked around the issue.

Seems like it's a combination of a UI issue and possibly a Chromium scrollbar issue with different zoom levels (maybe related to rounding of viewport or element dimensions).