doc: make scrollbar wider in large screens

[claudiorodriguez]

Checklist

• the commit message follows commit guidelines

Affected core subsystem(s)

doc

Description of change

Adds media queries to doc css to make TOC and content scrollbars
wider in larger screens.

Fixes: #6443

[ChALkeR]

Perhaps just 0.8vw?

[claudiorodriguez]

@ChALkeR 0.7vw kinda works for 2048+, so that's one less media query, but for 1280-2048 I can't find a satisfying value of vw that will work across all widths. Not a UX expert though.

[jasnell]

@nodejs/documentation @nodejs/website

[eljefedelrodeodeljefe]

LGTM let's land this and improve later. nit: Can you provide a screenshot of a rendered page?

[mathiask88]

I injected the change in chrome. Maybe 0.7vw is a bit too much

This is 0.5vw

[eljefedelrodeodeljefe]

yeah. if no-one objects I'd go with 0.5

[phillipj]

Could you add a new line at the end of file?

[phillipj]

LGTM other than my little inline nitpick

[preco21]

LGTM for 0.5vw!

[ChALkeR]

@mathiask88 The reason for 0.7vw being to much is because it is now relative to the screen width, and does not correspond to the size of other elements on the page.

Body font size is in css pixels, and I still don't understand why should the scrollbar size be increased for certain monitor widths but not the text itself.

I don't want to block this change though, as other ones think that it's a good idea, so -0 from me.

[mathiask88]

@ChALkeR I often work side by side like this

and Text sizes are totally okay. But the scrollbar width is not.I don't know if 0.5vw is the best solution. If I'm honest I don't like the custom bars at all.The default one is always good to catch isn't it?

[claudiorodriguez]

I'll leave this PR open for several days to get more opinions on this. I see this as a small incremental change that, even if not perfect, will improve the current situation. The responsiveness of the doc site to different screens evidently needs some reworking (text size should probably scale, etc), but I'd leave that to future PRs.

Right now the issue seems to be whether to remove the custom scrollbars entirely, or to keep this PR as is (or with some changes).

[eljefedelrodeodeljefe]

If there are no strong objections, I'll merge this in a couple of hours. Something off the books and taking new PRs is better, imo.

[silverwind]

Scaling the scrollbar based on width seems like a hack to me. Nothing else on the page scales with the width, why whould the scrollbar do? No strong objection thought.

By the way, for resolutions above 1080p, I'd suggest enabling OS-based scaling. Web sites are likely never going to support these resolutions properly.

[ChALkeR]

I also view this as a hack, and (as I stated above) I don't understand why should we scale the scrollbar size, but not the text size?

If the scrollbar is too small — perhaps we should just increase its width to 15px on all screens?

[silverwind]

If the scrollbar is too small — perhaps we should just increase its width to 15px on all screens?

My suggestion would be to make it either static 16px or em-based (1em).

[ChALkeR]

I will file an alternative PR shortly.

[mathiask88]

By the way, for resolutions above 1080p, I'd suggest enabling OS-based scaling. Web sites are likely never going to support these resolutions properly.

@silverwind I'm okay with the look and feel, text sizes etc. of all the web sites I use and I like the huge amount of space, but if a scroll bar is only a third of the width of the default bar then there is something wrong. Os based scaling is no option for me because it will introduce problems like blurry apps etc.

[lpinca]

Why the scrollbar has been customized in the first place?
Can't we use browser default scrollbar? This customization only works on WebKit based browsers anyway.

[silverwind]

Can't we use browser default scrollbar? This customization only works on WebKit based browsers anyway.

Just eye-candy basically. I could see us reducing the styling to just colors, removing dimension changes.

[ChALkeR]

See #6474.

[lpinca]

Another minor thing I noticed with the customization is that for example on OS X the scrollbar is always visible (does not auto hide). Maybe it is expected.

[silverwind]

does not auto hide

I think that's controlled by ::-webkit-scrollbar-thumb:window-inactive.

[claudiorodriguez]

Ok, so I made #6479 which, following suggestions from some, just removes all scrollbar styling altogether.

[claudiorodriguez]

Closed in favour of #6479