search

siefkenj / pretext-react

A ReactJS version of the Pretext UI
GNU General Public License v3.0
3 stars 7 forks source link

Vertical scroll bar in TOC covers expand/collapse chevrons #17

Open Alex-Jordan opened 2 years ago

Alex-Jordan commented 2 years ago

At least with certain OS/browser combinations, the vertical scroll bar on the TOC can appear on the right of the TOC and mostly cover over the chevrons for collapse/expand. See "Mathematics" in this screenshot from Mac OS 10.14.6 with Firefox 100.0.2.

Screen Shot 2022-06-03 at 4 44 07 PM

.

Alex-Jordan commented 2 years ago

Something like this helps:

scrollbar-color: gray transparent;

on the same element that has overflow-y: scroll; (in this case, the TOC nav). Only supported by Firefox. But then, this is so far only an issue with Firefox.

siefkenj commented 2 years ago

This might actually be a serious issue that needs some thought. I notice most sites put their chevrons on the left. It might be precisely because of this reason.

It would be great if we could get a UI designer to draft some different ways the TOC could look.

Alex-Jordan commented 2 years ago

Having the chevrons on the left does explain one thing that has bothered me subconsciously but now I understand why. When the chevron points down, that makes sense. It is pointing down to the things that are within that heading.

But when the chevron points to the right, what is it pointing to? If it's pointing right, positioned left of the heading, then it's pointing to the heading and it says "this heading has more stuff!" But if its positioned to the right, it's pointing into the ether.

Of course the chevron could be on the right but pointing left, but I wonder if I've ever seen that in practice.

siefkenj commented 1 year ago

This post has an interesting discussion: https://ux.stackexchange.com/questions/37686/how-should-you-show-that-an-accordion-is-expanded

I think pointing to the left and expanding down makes the most sense for us.