"Leave this site" button overlaps with text/icon to the left

[ravimakhijapi]

Describe the bug

The current responsive design of the website causes the "Leave this site" button to overlap with the icon and text to the left of it at certain pixel widths (e.g. at $\le$ 509px and at 845px), visually blocking the icon and text.

To Reproduce

This can be reproduced by viewing on a mobile device or resizing the window of a typical desktop browser from widest to narrower.

Expected behavior

The button should not overlap (and therefore block) the text/icon to the left.

Screenshots

Desktop (please complete the following information):

• OS: MacOS v26.0.1
• Browser: Chrome Version 141.0.7390.123

Smartphone (please complete the following information):

• Device: iPhone XR
• Browser: Safari
• Version: iOS v18.6.2

Additional Context

Some possible solutions:

1. Adjust the global media query breakpoints (or analogous TS if the breakpoints are handled there), adding line breaks as needed.
2. Adjust the media query breakpoints (or analogous TS if the breakpoints are handled there) of just this horizontal portion of the website, adding line breaks as needed.
3. Move the button to be underneath the text/icon at all times.

[ravimakhijapi]

PS. Please feel free to assign this issue to me if you'd like me to work on it. Thanks!

[bl00dymarie]

Hey @ravimakhijapi thanks for opening this issue and being willing to work on it. I'll assign you 🎢 !

Please let me know if you are no longer available to work on it and apologies for the long wait.

[github-actions]

Thank you @ravimakhijapi you have been assigned this issue!
Please follow the directions in our Contributing Guide. We look forward to reviewing your pull request. ✨

---

Support Chayn's mission? ⭐ Please star this repo to help us find more contributors like you!
Learn more about Chayn's impact here. 🌸

[haseeb-iqbal]

I was investigating the issue and it seems to be resolved. I think we can close this.