1832374 - Line-wrapped run results can overlap the overlay scrollbar area, making it in accessible

Status: NEW

(Tree Management :: Treeherder, defect)

Description

[David Shin[:dshin]]

Attachment: Screenshot of the issue, unclickable result highlighted

STR: On https://treeherder.mozilla.org/jobs?repo=autoland, shrink the window such 1) It has a vertical scrollbar & 2) A single-digit run result is pushed to the right side as far as possible.
Expected: The wrapping should happen such that the run result is clickable.
Actual: Trying to click on the run result causes the scrollbar to move.

Comment 1

[Daniel Holbert [:dholbert]]

Note: to reproduce this issue, you need to be using a browser with "overlay-style scrollbars" (which is now the default in Firefox on all platforms except Windows 10).

On Windows 10, you can opt in to overlay-style scrollbars by un-checking "always show scrollbars" in Firefox preferences. (Same on Linux, but it's unchecked-by-default there.) On macOS and Win11, there's a setting with a similar name in the system preferences app, which Firefox respects (and which is overlay-style by default I believe, i.e. "always show scrollbars" is off).

Comment 2

[Daniel Holbert [:dholbert]]

Actually, I guess this might not be reproducible on macOS -- it seems that on macOS, overlay-scrollbars only appear when you scroll. So if you aren't actively scrolling, you're able to hover & click a tiny single-character link at the extreme right edge of a scrollable area.

But in Firefox on Linux (and other apps e.g. gedit as well), and in Firefox on Windows, the overlay scrollbar appears whenever you move your cursor. So that makes it impossible to hover & click a tiny single-character link at the extreme right edge of a scrollable area.

Comment 3

[Daniel Holbert [:dholbert]]

Possible fix: add some nominal amount of padding-right to the .job-row class. (That's the CSS class for the table cells that contain all of the clickable task letters.) E.g. maybe:

.job-row {
  [...]
  /* reserve some space where we expect an overlay scrollbar to potentially appear */
  padding-right: 15px;
}

If that cell has some reserved padding on the right edge, then that will ensure that the single-letter job links won't quite reach the right edge of the page.

(Minor downside: this space will be "wasted" on macOS and on browsers with classic scrollbars, but it's probably a small enough amount of space that it doesn't matter too much. In a perfect world, it'd be nice to do this selectively, but I'm not sure you can easily detect the scrollbar style from CSS.)