| • alexhollender_WMF | |
| Apr 6 2020, 6:04 PM |
| F32426759: Screenshot from 2020-11-03 14-41-29.png | |
| Nov 3 2020, 1:58 PM |
| F32426761: Screenshot from 2020-11-03 14-40-43.png | |
| Nov 3 2020, 1:58 PM |
| F32426750: Screenshot from 2020-11-03 14-35-08.png | |
| Nov 3 2020, 1:58 PM |
| F32426756: Screenshot from 2020-11-03 14-33-58.png | |
| Nov 3 2020, 1:58 PM |
| F32426768: Screenshot from 2020-11-03 14-37-32.png | |
| Nov 3 2020, 1:58 PM |
| F32426763: Screenshot from 2020-11-03 14-34-21.png | |
| Nov 3 2020, 1:58 PM |
| F31737112: image.png | |
| Apr 6 2020, 6:04 PM |
| F31737072: Screen Shot 2020-04-06 at 1.26.44 PM.png | |
| Apr 6 2020, 6:04 PM |
Currently the scrollbar is rendering inside of the content div, which in some browsers results in it overlapping the content. It would be a design improvement if we could move it to the outer container.
| current | improved |
|---|---|
 |  |
Simple prototype: https://codepen.io/alexhollender/pen/abOeNxB
Additional context: as the result of T246029 fewer reference previews will have scrollbars.
| Subject | Repo | Branch | Lines +/- | |
|---|---|---|---|---|
| Move scrollbar for longer references to the right | mediawiki/extensions/Popups | master | +2 -0 |
Change 636654 had a related patch set uploaded (by Thiemo Kreuz (WMDE); owner: Thiemo Kreuz (WMDE)):
[mediawiki/extensions/Popups@master] Move scrollbar for longer references to the right
Note: I started working on T249548 and this task here together, because both touch pretty much the exact same lines of code. It was only after I finished both tasks that I was able to split them into separate patches. They still depend on each other.
Change 636654 merged by jenkins-bot:
[mediawiki/extensions/Popups@master] Move scrollbar for longer references to the right
To be discussed with @ECohen_WMDE:
@ECohen_WMDE, this is how it currently looks in Chromium (Ubuntu 20):
The same with 1px padding on the right of the scrollbar. Because of the way Chromium styles the scrollbar, this 1px white gap just adds another 1px line next to other grayish 1px lines. Personally I find this to busy.
Firefox (Ubuntu 20) without padding:
With 1px padding in Firefox:
We can position the scrollbar exactly in the middle between the old and the new position, i.e. this is with 8px padding left and right of the scrollbar. Or maybe use something like 4px?
We can make the scrollbar reach the top and bottom of the popup. Unfortunately this creates quite some glitches. The text will reach the very edge of the popup, leaving no whitespace. This especially happens when scrolling long texts. Also note the somewhat broken icon in the screenshot below. This is because of the way the little white triangle at the corner of the popup is implemented.
@thiemowmde Thank you for sharing all these examples. It was very helpful, particularly in seeing that the location at the edge isn't the problem. I think the added whitespace feels a bit odd/more off than before (both the 1px and 8px options).
The scrollbar to the top and bottom looks better, but the resulting glitches feel quite broken. After discussing with Lena, we decided to leave it as it currently is (at the edge but with margin at the top and bottom). Expanding the height of the scrollbar (and the required troubleshooting or workarounds) doesn't seem worth it. For these reasons, I'll close the ticket.