Visibility of scroll bar in main UI

[elhananjair]

How to use GitHub

• Please use the 👍 reaction to show that you are interested into the same feature.
• Please don't comment if you have no relevant information to add. It's just extra noise for everyone subscribed to this issue.
• Subscribe to receive notifications on status change and new comments.

Is your feature request related to a problem? Please describe.
I am having a problem on scrolling in both vertical and horizontal scrolls in Nextcloud UI. The color of the scroll and the width is too small.

Describe the solution you'd like
Using visible color like dark gray or any visible color would fix this thing, and widen the scroll will be good for easy use of scrolls.

Describe alternatives you've considered

Additional context
Nextcloud Version: 20.0.2
Web Browser: Microsoft Edge Version 87.0.664.57
Thank you so much

[szaimen]

Hi, could you please post a screenshot of what you are talking about?
Thank you!

[elhananjair]

@szaimen Thank you for your reply.

I think it would be best if the scroll bar color is solid enough on hover and clicked events, sometimes when I use old projectors I can't see the scroll bars very well.

[szaimen]

I think it would be best if the scroll bar color is solid enough on hover and clicked events

cc @nextcloud/designers does this make sense?

[skjnldsv]

We increased the size with nc20 iirc.
We could up the size even more @jancborchardt

[shavs]

I think the scrollbar size appears to be problematic on Firefox, where scrollbar-width: thin is being used to determine the width of the scrollbar.

I am using Firefox Developer Edition, 90.0b12 (64-bit) to show this, but scrollbar-width: thin has been available since Firefox 64.

I am also using Arch Linux as my client's OS, up to date to current (10/07/2021).

---

Without scrollbar-width: thin; (unchecked in Firefox dev tools):

normal.mp4

With scrollbar-width: thin; (Nextcloud 21.0.3 default):

thin.mp4

---

As a comparison to Chromium, here is a screenshot showing (in order):

• Firefox (with scrollbar-width unchecked),
• Firefox (Nextcloud 21.0.3)
• Chromium (Version 91.0.4472.114 (Official Build)) (Nextcloud 21.0.3)

---

Is it possible to get scrollbar-width: thin; removed in future releases of Nextcloud? If it isn't, is it possible to provide a user-level configuration to change this?

[raimund-schluessler]

Is it possible to provide a user-level configuration to change this?

You can use the custom CSS app to adjust every CSS setting you like to within Nextcloud.

[shavs]

@raimund-schluessler That's good to know!

I think this change (if possible) should be put upstream though, as I think the "standard" Firefox scrollbar should be wide enough that it matches the current sizes defined for Webkit-based browsers (12px, according to the current *-server.css file).

For reference (in the order presented in the screenshot):

• Firefox - without scrollbar-width: thin;: 12px
• Firefox - with scrollbar-width: thin;: 6px
• Chromium: 12px (as defined by ::-webkit-scrollbar { width: 12px; height: 12px; })

In addition, for Firefox 89.0.2 (64-bit) (current stable version) on Windows:

• without scrollbar-width: thin;: 17px
• with scrollbar-width: thin;: 8px

[elhananjair]

In addition to the thickness of the scrollbar I think on "Click" and "Hover" state, It would be best if the color intensity of the background be increased to view the scroll bar well enough.

[juliusknorr]

@jancborchardt I'd actually vote for just using the default browser size for the scrollbar to have it more discoverable and fit the default system preference there. Any thoughts?

[elhananjair]

@jancborchardt I'd actually vote for just using the default browser size for the scrollbar to have it more discoverable and fit the default system preference there. Any thoughts?

yeah but changing the color of the scroll bar is also nice...

This issue has been automatically marked as stale because it has not had recent activity and seems to be missing some essential information. It will be closed if no further activity occurs. Thank you for your contributions.