Stopped scrollbar being hidden by rounded corners #37962
Conversation
* I didn't include the compiled apps.css, server.css, etc. because I'm not sure what the procedure for those autogenerated files are * Signed-off-by: JL102 <jordanlees@mailbox.org>
|
@JL102 you need to add the changes to the autogenerated files to this PR. The CI won't go green unless you do it. |
szaimen
requested review from
a team,
Pytal,
artonge,
juliusknorr and
szaimen
and removed request for
a team
Understood. Fixing |
Signed-off-by: JL102 <jordanlees@mailbox.org>
szaimen
requested review from
Jerome-Herbinet,
jancborchardt and
nimishavijay
and removed request for
szaimen
Jerome-Herbinet
left a comment
Jerome-Herbinet
left a comment
There was a problem hiding this comment.
Nice idea ! ... but sadly, this CSS property seams to be not supported by FF.
Please check : https://developer.mozilla.org/fr/docs/Web/CSS/::-webkit-scrollbar
I let other reviewers verify this information.
If confirmed, it might be necessary to imagine a workaround or a different way to get the same result.
Firefox has been doing scrollbars differently from Webkit/Blink-based browsers for a long time. I don't believe it's possible to do the same trick in Firefox, because the only three W3c-standard scrollbar related attributes I can see are scrollbar-color, scrollbar-gutter, and scrollbar-width; none of which can control the buttons. |
|
Thanks for your first pull request and welcome to the community! Feel free to keep them coming! If you are looking for issues to tackle then have a look at this selection: https://github.com/nextcloud/server/issues?q=is%3Aopen+is%3Aissue+label%3A%22good+first+issue%22 |
6 participants
NOTE: I didn't include the compiled apps.css, server.css, etc. because I'm not sure what the procedure for those autogenerated files are. I figured it's easier for a maintainer to merge the PR then re-generate the files, rather than deal with a potential merge conflict
Summary
I find the fact that Material Design 3 allows for scrollbars to be hidden behind rounded corners incredibly offensive from a design standpoint. I checked the design guidelines and I couldn't find any explicit rules stating that they should be this way. I believe that it is much more aesthetically pleasing to stop the scrollbar before it starts being rounded. This code only modifies the scrollbar in the main app content, since that's the only container I could find that had a scrollbar hidden behind a rounded corner.
Before:
After:
Checklist