[win 20] vertical scrollbar unusable with mouse as it is too thin

[gggeek]

• [x] This is not a troubleshooting question. Troubleshooting questions go here: http://www.mattermost.org/troubleshoot/.
• [x] This doesn't reproduce on web browsers (such as in Chrome). If it does, issue reports go to the Mattermost Server repository.
• [x] I have read contributing guidelines.

---

Summary

The vertical scrollbar is too thin. First of all this makes it hard to target it with the mouse for grabbing the scrollbar handle. But, even more importantly, it also makes it almost impossible to grab the scrollbar handle, as windows will actually turn the mouse cursor to the enlarge-window-horizontally variant when it is hovering over most of the area of the scrollbar handle, leaving an extremely narrow space which can be used to click on the handle and drag it.

Details

The handle (and scrollbar) are wide 8 px on my laptop. When the mouse hover the leftmost 2-3px of the scrollbar, it does allow to act on it. When the mouse hover the rest of the scrollbar, it can only be used to resize the app.

This is probably a behaviour which depends on the exact version of windows in use, and possibly also on the fact that the screen is set to 100% zoom/less/more, or the fact that there are other screens attached with different resolution - I noticed a while ago that windows 10 has always had weird ideas about where the cursor should be positioned to allow horizontally resizing a window...

Environment

• Win 10
• Mattermost Desktop App version: 4.6.2
• Mattermost Server version: Build Hash: 3ad4c82bbe1817f160fb2e601cb110f1319bb44a EE Build Hash: none Webapp Build Hash: 56dcdde78ecba2bdf5170330d1a6152cd365c3ef

[devinbinnie]

@matthewbirtch @esethna Any thoughts on what we could do here?

[matthewbirtch]

@devinbinnie @gggeek would it be possible to get a screen recording of the behaviour?

[gggeek]

Here's a video, recorder with a phone to make sure cursor was part of the capture:

https://drive.google.com/file/d/1TrDwF58gFdlbtGm7vHu-KCFy_B2E10-i/view?usp=sharing

[esethna]

@devinbinnie is this a valid bug or do we not have control over this behavior?

[devinbinnie]

@esethna We do, but from the video it looks like that might be part of the webapp instead of the Desktop App.

@gggeek Any chance we could get a screen capture recording of the same behaviour?

[esethna]

@devinbinnie it's a desktop only bug, here's chrome: https://gyazo.com/a0bf0a13d2ebb2d9ba8d1e63145f4c12

[devinbinnie]

@esethna It's likely still webapp code that needs to change.

[esethna]

Filed a bug here: https://mattermost.atlassian.net/browse/MM-40610

This has been brought up before and I think we should definitely address it if we have control over this behaviour

[gggeek]

If that might help: I checked how other messaging apps, based on Electron, behave. It seems that, at least one well known app adds some padding pixels on the right-hand side of the scrollbar. Maybe those were added to work around this issue?

[kelderek]

My 2 cents is that I think gggeek's observation of adding pixels is the easiest and best way forward.

@devinbinnie I think you are right that the change would have to be in the webapp code. I did some testing on my mattermost server and I believe the two changes below will add a 5px right hand border. It does look like it shifts over the entire div, so it is probably not the best solution, but a functional PoC. I started doing a PR for it, mainly for easier communication of my changes, but I saw all the PR requirements and it was too much for me. I have some coding background but haven't done any real coding in 20 years. I tried to create an issue in Jira for it, but didn't have rights to do that.

If you or someone else wants to make this happen for real, here is how I did it. The first is for the posts list, the second is for the admin console. It definitely needs further testing in general, especially with different themes.

1. In mattermost-webapp/components/post_view/post_list_virtualized/post_list_virtualized.jsx, add this to the const virtListStyles definition currently on line 41 right: '5px';

2. In mattermost-webapp/sass/routes/_admin-console.scss add this to the .admin-console__wrapper section currently on line 28 position: relative; right: 5px;

[esethna]

cc// @hmhealey if there's any thoughts on this ^ as well, since this is probably web platform team AOR.

Scroll bar feedback is common and it would be great to address this. The accuracy required to click and drag the scrollbar on the RHS and/or center pane is very high, considering the window resizer conflicts with the clickable area.

As mentioned, adding a buffer zone is an option and also potentially using a different scrollbar component in the RHS that overlaps the content, rather than pushing it over (ie similar to Slack)

[nikkilocke]

There is no scrollbar at all visible in the Windows app right hand pane (e.g. when looking at saved messages).

The bar is there, because, if you are very lucky, you can click on where it should be, and drag it.

It's time this was fixed!

[esethna]

I've re-triaged the ticket here: https://mattermost.atlassian.net/browse/MM-40610

Given it's Hacktoberfest, if anyone following this issue want to submit a PR for it we'd be happy to accept it and work with you on it! cc// @gggeek @nikkilocke @kelderek

[kelderek]

@esethna I haven't done real coding since college 20+ years ago, so I am kind of out of touch with modern coding practices. I know enough to clone the mattermost-webapp repo, implement the changes I outlined back in April, and create a PR. What I don't know about is all the unit testing, e2e testing, etc. outlined here in the Mattermost PR guidelines: https://developers.mattermost.com/contribute/more-info/getting-started/contribution-checklist/

If someone wants to help me with that stuff, or just use my suggestion from April directly in their own PR, that works for me

[esethna]

@kelderek please feel free to submit the change in a PR and we can get someone to help or guide with the remaining stuff!

[kelderek]

Created PR#11292 https://github.com/mattermost/mattermost-webapp/pull/11292

[esethna]

Awesome @kelderek! Will follow-up on there, thanks!

[kelderek]

Also FWIW when looking for other places where the scrollbar is on the right hand edge I noticed that the other boxes that show on the right hand side like search and pinned posts are using the margin-right and margin-bottom properties to completely hide the scrollbars altogether. This is not specific to the desktop app.

@esethna Do you know if that behavior is intentional? It seems like a strange thing to effectively remove the scrollbars, doubly so by changing the margins instead of just setting overflow: hidden. To be clear, the boxes can be scrolled, but only with a mouse wheel or gestures as there is no scrollbar to click and drag

[hmhealey]

I don't think this behaviour is intentional. We've always had issues with scrollbars being inconsistent throughout the app, so this is probably a case that was overlooked or changed accidentally at some point

[kelderek]

To follow up on my earlier post, the native scrollbars were being hidden because custom scrollbars were actually there, but invisible because of their color. The PR includes moving those custom scrollbars in by 5px to make them usable in the desktop app, and also changing the color so they are usable. They were set to be auto-hiding so you have to mouse over them to make them show up, which isn't a decision I personally agree with, but that is how they were previously setup so I left that part alone.

[esethna]

Thanks to @kelderek for the great work on fixing this in his PR! https://github.com/mattermost/mattermost-webapp/pull/11292

It will be shipping in Mattermost server v7.6 in December