Scrollbar in the package detail view

[contaoacademy]

Depending on how many tabs are displayed in the detail view, the scrollbar may be visible. In the following example, you see the manager-bundle in the German language.

Perhaps this view can be optimized.

[aschempp]

The scrolling is intentional, but on my browser the bar looks much better. Didn't think of other browsers, this sure should be optimized 🙈

[zoglo]

@contaoacademy could you tell me what OS and browser you are using?

[contaoacademy]

MacOS and Firefox or Brave Looks the same with both browsers

However, as already mentioned, this only occurs if the width is insufficient

Although I don't think it's really bad, because in 90% of cases the scrollbar is never visible. In my specific case it would be sufficient to reduce the margin of the individual tabs from 2px to 1px.

[zoglo]

@aschempp @contaoacademy How about a width of 800px (instead of 750px):

This would have to be fixed in the package-list tho

[aschempp]

This would only solve the issue for german, but we are multilingual ;)

[zoglo]

But Germans usually use the longest words :D. Should we go with custom scrollbar styles then?

Thought that Mac doesn't show scrollbars anymore after a few seconds (showing on hover tho) and it's a system setting you have to opt-in to always show it again.

[fritzmg]

In Windows it looks like this:

imho it should may be work the same way as the new fieldset links in the contao back end editing view.

[zoglo]

imho it should may be work the same way as the new fieldset links in the contao back end editing view.

@fritzmg can you provide a screenshot of this example?

[fritzmg]

Just edit a record in Contao 5.3 :)

It uses

overflow-x: scroll;
scrollbar-width: none;

which means you can only scroll via touch, gestures or the middle mouse button.

[zoglo]

Just edit a record in Contao 5.3 :)

It uses

overflow-x: scroll;
scrollbar-width: none;

which means you can only scroll via touch, gestures or the middle mouse button.

But that would be bad UX since you can't really see that you could scroll.

You did use a vw of < 800px to take your screenshot, right? Just wondering if there is still devices out there that use that width

[fritzmg]

But that would be bad UX since you can't really see that you could scroll.

imho that's negligible in this case

Just wondering if there is still devices out there that use that width

Browsers can be any width, it's not about devices. And smartphones have a width smaller than 800px for sure.

[zoglo]

And smartphones have a width smaller than 800px for sure. Changing it to scrollbar-width: none; would also hide it on smartphones -> And some people actually look at extensions on their phone and this is a change happening in the package-list (thus on extensions.contao.org as well).

I was thinking more of a solution that would add a pseudoelement covering the scrollable area with a linear-gradient. Lemme just propose that in a PR so you'll see what I mean.

[fritzmg]

You will always see that something is cut off and then try to scroll imho. After all, that's what you do with regular content too. But a linear gradient to indicate something scrollable certainly will not hurt.

[zoglo]

You will always see that something is cut off and then try to scroll imho

You said it yourself that browsers can be any width. In specific cases, you won't see that something is cut off.

But a linear gradient to indicate something scrollable certainly will not hurt.

👍

[zoglo]

See: https://github.com/contao/package-list/pull/14

[aschempp]

Fixed in 5ed70869e23cbfc5a3a6d439daee4440d86b1c2f