cms icon indicating copy to clipboard operation
cms copied to clipboard
verified publisher icon statamic

[6.x] Scrolling horizontal lists

Open helloDanuk opened this issue 4 months ago • 5 comments

Bug description

When scrolling long horizontal lists you see a border on the left side but also content on the other side of the border. The content scrolls beneath the left border.

Furthermore, the profile picture gets squashed.

Image Image

How to reproduce

Scroll through a longer list, such as "Users", on a narrower screen.

Logs

Environment

6.0.0-alpha.7

Installation

Fresh statamic/statamic site via CLI

Additional details

No response

helloDanuk avatar Sep 15 '25 15:09 helloDanuk

FYI I can't replicate the avatar squashing. I think that might have been inadvertently fixed since you reported this issue

JayGeorge avatar Oct 01 '25 15:10 JayGeorge

@JayGeorge Yup, the avatar squashing has gone. But the scrolling behaviour still has a few hick-ups in alpha-12. I have tested in Chrome:

  • There is still a pixel-wide leftover blinking on the left side on the other side of the border (see video)
  • Author column runs over the checkmark (see video)
  • On the right side, the rounded right border is not present. But on the left the border stays, if you start scrolling (see screenshot). I like the right side without a border if the content doesn't fit in the available space.

https://github.com/user-attachments/assets/e00b7a18-619e-4e2f-a344-b4e161fd01bd

Image

helloDanuk avatar Oct 13 '25 15:10 helloDanuk

That's really weird. Can you wait for the next alpha and see what that looks like for you?

This is what it looks like for me

https://github.com/user-attachments/assets/5ef4db29-007c-413c-b5d0-80cf0da6d4d5

It should work well in Chrome, and Safari should be fine too. I've used scroll container queries to change the border radius on horizontal scroll, so the border-radius should disappear if you have a browser that supports container scroll-state queries (currently this is supported in Chromium)

JayGeorge avatar Oct 20 '25 08:10 JayGeorge

@JayGeorge Sure! I will give you a feedback after the next alpha. Thanks for writing back.

helloDanuk avatar Oct 20 '25 08:10 helloDanuk

Hi @JayGeorge, I was able to do a few tests with a fresh alpha 15 installation today. I noticed the following:

  • Chrome and Safari: The pixel-wide leftover on the left side of the checkmark still appears, but only on a middle width browser size (I haven't tested the exact width). In the video below you see it on the browser window to the right, at the end of the video.

https://github.com/user-attachments/assets/967ba91b-e9c9-4dbe-933e-6488c0645b66

  • Chrome and Safari: Depending where you scroll, you can also scroll the whole content, not just the list. In the video below a grey background appears on the right and everything including the header bar scrolls (e.g. icon and title "Users").

https://github.com/user-attachments/assets/b392faf5-9371-4961-b77b-469c420fe999

  • Chrome and Safari: In dark mode, the row where the cursor is pointed to, has probably some z-index issues with the checkmark on the left side (e.g. user avatar on second row). Also the horizontal border has different colors.
Image
  • Safari only: There is no grey border on the right, if you reach the end on the right side. In Chrome, you can scroll to the right until the same grey border appears on the right-hand side. In Safari the scrolling stops, when you reach the end of the white columns.

https://github.com/user-attachments/assets/e5b2a923-93a8-44ca-89d0-733751303543

  • Chrome and Safari: In the assets list there is something off on the right side. In addition, the checkbox in the header scrolls to the left and behaves differently. But this happens not every time, probably only on small displays linke phones. In addition you can also scroll the whole content, not just the list.

https://github.com/user-attachments/assets/a5f2ed2e-22d2-47a9-8116-db05c43ceb56

  • Chrome and Safari: The checkmark in a collection list header also scroll to the right, compared to the entries checkmarks
Image
  • Chrome and Safari: Just a detail, included for the sake of completeness. The rounded frame is handled differently on the left side than on the right. On the right, it only appears at the very end. On the left, it remains in place (maybe because of the checkmarks). I like it on the right side when the white extends just beyond the edge without a border radius.

Nevertheless in Assets it's handled a bit different. A rounded corner is only visible on the bottom-left corner not in the top-left corner.

Image Image

I hope this helps you a bit further.

helloDanuk avatar Oct 31 '25 23:10 helloDanuk