Page MenuHomePhabricator

Move scrollbar to outer container
Closed, ResolvedPublic2 Estimated Story Points



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.

Screen Shot 2020-04-06 at 1.26.44 PM.png (265×352 px, 89 KB)
image.png (269×371 px, 61 KB)

Simple prototype:

Additional context: as the result of T246029 fewer reference previews will have scrollbars.

Event Timeline

ECohen_WMDE renamed this task from Investigate moving scrollbar to outer container to Move scrollbar to outer container.Oct 16 2020, 8:32 AM
ECohen_WMDE moved this task from Before Default to Ready for pickup on the Reference Previews board.
Lena_WMDE set the point value for this task to 3.Oct 19 2020, 9:16 AM

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:

  • Try a 1px gap on the right of the scrollbar.
  • Put it in the middle between the old/new position?
  • Make it touch the upper/lower popup edge?

@ECohen_WMDE, this is how it currently looks in Chromium (Ubuntu 20):

Screenshot from 2020-11-03 14-35-08.png (381×336 px, 29 KB)

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.

Screenshot from 2020-11-03 14-33-58.png (386×342 px, 30 KB)

Firefox (Ubuntu 20) without padding:

Screenshot from 2020-11-03 14-40-43.png (389×347 px, 35 KB)

With 1px padding in Firefox:

Screenshot from 2020-11-03 14-41-29.png (391×338 px, 35 KB)

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?

Screenshot from 2020-11-03 14-34-21.png (380×338 px, 29 KB)

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.

Screenshot from 2020-11-03 14-37-32.png (391×335 px, 39 KB)

Lena_WMDE changed the point value for this task from 3 to 2.

@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.