[BUG]: expand/collapse button broken hover effect

[mezotv]

Description 📝

When hovering over the expand/collapse button the text under it turns unreadable

Link 🔗

https://syntaxui.com/docs/animations/skewed-infinite-scroll

Steps to Reproduce 🔄

1. Go to https://syntaxui.com/docs/animations/skewed-infinite-scroll
2. Scroll down to the expand button in the code view
3. Hover over it

Screenshots 📸

Expected Behavior 🤔

The button has a hover effect thats inline with the branding

Actual Behavior 😱

The hover effect is applied to the background and makes the code under it unreadable

Environment 🌍

Firefox - Windows 11

Additional Information ℹ️

No response

[mezotv]

I got a fix ready for this once you approve @Ansub!

[epoll31]

@mezotv

in src/components/code/CodeGroup.tsx, in this button:

<Button className="w-xs absolute bottom-0 left-0 right-0 block rounded-2xl bg-transparent p-0 text-sm font-medium text-white"
  onClick={() => setMinimized(!minimized)}
>
  {minimized ? 'Expand' : 'Collapse'}
</Button>

adding w-full to the className instead of w-xs will solve the centering issue in firefox. This way we can make sure that it's centered on all browsers.

[mezotv]

adding w-full to the className instead of w-xs will solve the centering issue in firefox. This way we can make sure that it's centered on all browsers.

I made sure to add that, thank you!

[Ansub]

fixed here: 7118b8b