Scrollbar is not pressable at the right edge of the viewport

[rotemdan]

Bug description

When the the mouse is located at the right edge of the viewport, the scroll bar is not responsive to clicks (pressing the left mouse button would cause text selection instead, which is not expected behavior).

It requires slight positioning to the left to get it pressed.

This is an issue with many different websites, but I've found a simple way to solve it here.

Steps to reproduce

1. Position the mouse at the right edge of the viewport
2. Try to press and drag the scrollbar

Screen capture

Specs

• OS: Windows 11
• Browser: Brave Version 1.70.117 Chromium: 129.0.6668.59 (Official Build) (64-bit)
• chat-ui commit: v0.9.2 (web)

Temporary fix using a custom stylesheet

1. Install the Stylus extension

2. Apply this stylesheet to https://huggingface.co/chat/

@-moz-document url-prefix("https://huggingface.co/chat/") {
    div.scrollbar-custom {
        margin-right: 0px !important;
    }
}

The stylesheet simply zeros the right margin for the element that includes the scrollbar. The margin is otherwise 4px, which causes the problem.

Screen capture after applying stylesheet

Thanks

I've been frustrated by this issue for a while now. I'm glad I've found a temporary workaround.

I would appreciate the issue being fixed for all users. Sometimes what looks like a minor UI fix can make a surprisingly large improvement in the overall user experience.

[nsarrazin]

Hi, thanks for reporting an issue! Looks like you already have a fix, if you want to open it as a PR i'll happily review it 🚀

[rotemdan]

The workaround I gave basically overrides some CSS properties with a browser extension.

In order to fix this properly, it should modify the cause of why the margin is added in the first place.

The particular HTML class that adds the margin seems to be .mr-1:

It's added to the element:

There are 4 source files that include a div element with the combination of scrollbar-custom mr-1:

src/lib/components/chat/ChatWindow.svelte
src/routes/assistants/+page.svelte
src/routes/models/+page.svelte
src/routes/tools/+page.svelte

I could just remove mr-1 from all of them but I'm not really familiar with what each does, and not sure how exactly they would be impacted by this.

I can't really make a pull request without being sure what I'm doing makes sense.

Edit: I did make a pull request with these changes, but didn't test it since I couldn't get chat-ui to run locally (issues with database, etc.)