Fixed the presence of a horizontal scrollbar on the shop page

[itsvyle]

When opening the arcade shop page (ex: https://hackclub.com/arcade/[ID HERE]/shop/), a horizontal scrollbar appears on the bottom (see picture):

This is the case because the tag which contains "Welcome to the shop" has a width of 100 view-width, instead of container percentage; as there is a vertical scrollbar, 100% of the view-width would go over that vertical scrollbar, therefore overflowing from the page.

Furthermore, even fixing the issue with the h1's width didn't seem to work, as it's container's display is inline-block, therefore not correctly sizing itself to the page's width

I couldn't find a way to set width: 100% directly on the title's container element, which is a Balancer; It seems that we can't add style properties on it as they are overwritten by the wrap balancer's code (see https://github.com/shuding/react-wrap-balancer/blob/704dabd9f9bbdfdb75e4a9b0ecec9b5fa91e559c/src/index.tsx#L259)

The solution I have implemented (adding a classname) is pretty hacky, but it should work.

If anyone has input on how I can make it more functional/integrated with React in a cleaner way, feel free to comment!

PS: It's my first time actually writting a bit of React (I had only read some before), so maybe there's an obvious solution I'm missing here

[vercel[bot]]

@itsvyle is attempting to deploy a commit to the Hack Club Team on Vercel.

A member of the Team first needs to authorize it.

[itsvyle]

I just realized I didn't follow the guidelines for git commit naming 😶

[itsvyle]

I reverted the formatting!

Sorry for the inconvenience, I saw that prettier was installed, so I just ran it

[vercel[bot]]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
site	✅ Ready (Inspect)	Visit Preview	💬 7 unresolved	Jun 19, 2024 1:10pm