Set scrollbar size in CSS

[willmcgugan]

The scrollbars can be a little hard to click when cells are quite small, particularly a vertical scrollbar.

We should add CSS rules to set the size of scrollbars.

scrollbar-size: 2 1;
scrollbar-size-vertical: 2;
scorllbar-size-horizontal: 1;

We could make this responsive as the size of the screen changes. For now we just need the rules.

[olivierphi]

I find the "size" part of scrollbar-size a bit ambiguous, as it could also be something to set the size on the main axis (i.e. customising the vertical height of a vertical scrollbar) ? I was thinking of using a name like scrollbar-width instead, as to me it is a bit clearer as to the impact of this CSS property.

After this I checked the "browsers CSS" equivalent, and found out that there is indeed a property to do this, which is also named scrollbar-width. And rather than letting the developer select an arbitrary size, the values for it are limited to a few keywords: auto (the default) thinor none. As a 10 cells width scrollbar (for example) would probably make no sense for Textual anyway, maybe we should also allow only some keywords, rather than arbitrary values - except that on our case we would allow 1 cell or 2 cells scrollbars? So something like scrollbar-size: normal | thick | none for example?

What do you folks think @willmcgugan @darrenburns ? :slightly_smiling_face:

[olivierphi]

As discussed: we stick to the original plan, with the -size terminology and the ability for users to use any custom size with integers

[olivierphi]

Freshly rebased on the css branch, and ready for review! :slightly_smiling_face: #529

[willmcgugan]

https://github.com/Textualize/textual/wiki/Sorry-we-closed-your-issue

[github-actions[bot]]

Did we solve your problem?

Glad we could help!