CSS Positioning Issue with Box Styles: Badges Not Displaying Correctly on Large Screens

[gusty echo]

What's wrong with the code below and specifically the Box styles? On mobile the badges are being displayed as expected but on large screen the last badge is not visible and the one before it is half visible. When I remove the styles of the Box everything works as expected but then I don't achieve the desired layout (The container of the badges should be fixed)

codesandbox:
https://codesandbox.io/s/runtime-wood-mcczj6?file=/src/App.tsx

Open this link on a laptop to see the problem:
https://mcczj6.csb.app/

[gusty echo]

@stark ruin Hey Charlie, can you please help me with this? I tried with ChatGPT but it couldn't find the mistake

[stark ruin]

i tend to just stick with mantine Stack and Group nearly always. i don't bother with doing flex myself

for example if you convert what you've done to use Group and Stack there is no problem:
https://codesandbox.io/s/css-positioning-issue-forked-wpf5gd?file=/src/App.tsx

[gusty echo]

But the container of badges is not fixed like the one I had in my codesandbox. How can I make the position fixed without breaking the scrolling?

[stark ruin]

what do you mean by fixed? they both seem to behave the same for me on desktop

[gusty echo]

I mean that when we scroll down the container which hold the badges should be visible.

If I will apply sx={{position: 'fixed'}}, this horizontal scrolling won't work anymore

[stark ruin]

ScrollArea pos="fixed"

actually that might not impact it

[gusty echo]

I tried that. It didn't work

If you take a look at my codesandbox. You will notice that when we scroll down the container which holds badges stay on top always. But for some reason the horizontal scrolling in the badges container doesn't work on large screens. It works but the last badge is not visible

There is something weird. The code in my codesandbox works perfectly on small screens but when it comes to large screens, the last badge is not visible and the one before it is half visible

[stark ruin]

seems like this is broken behaviour of position: fixed

https://stackoverflow.com/questions/4676131/how-do-i-get-a-fixed-position-div-to-scroll-horizontally-with-the-content-using

[stark ruin]

tried a lot of things, i don't see an obvious answer

as a hack fix you could set some right margin, it may need to be responsive
https://codesandbox.io/s/css-positioning-issue-forked-wpf5gd?file=/src/App.tsx