Repo Link Not Responsive on Mobile Devices

[thatraghavarora]

Mobile Responsiveness Issue — Repo Link Overflow in “Submit your Article to the GitHub Repo” Section

Description:
On the page https://viewpoints.stability.nexus/submit/, under the section “Submit your Article to the GitHub Repo”, there is a GitHub repository link displayed in a box/container.
This element is not responsive on mobile devices, causing horizontal overflow and breaking the layout.

Issue Details:

The repo link container overflows on small screens.

The layout shifts and the text does not wrap properly.

Mobile users have difficulty interacting with the link.

Expected Behavior:

The box should be fully responsive.

No overflow should occur on small devices.

Text should wrap or the container should resize according to screen width.

[thatraghavarora]

Request:
📌 Please assign this issue to me. I would like to work on fixing the responsiveness and removing the overflow.

[siddharthseth888]

Hello Maintainers,
I hope you're doing well!

I've worked on resolving this issue and implemented responsive behavior using Tailwind CSS utilities. I’ve attached a short video demonstrating the responsiveness in action.

If everything looks good to you, I would be grateful if you could assign this task to me so I can proceed with the PR.
Looking forward to your feedback!

Thank you!

Video Link - https://www.loom.com/share/ea63904a8ffd4d15bbb23404905fc933

[achalcipher]

TEAM NULL

Fix mobile responsiveness: prevent GitHub link horizontal overflow

Problem:
The long GitHub link (github.com/StabilityNexus/StableViewpoints) in the
"Go to our repository" section was causing horizontal overflow on mobile devices,
breaking the mobile layout.

Solution:

• Added .repo-link-box CSS class with overflow-wrap: break-word to the
  paragraph containing the GitHub link
• Applied media query targeting screens ≤768px (mobile/tablets)
• Added word-break and word-wrap fallbacks for cross-browser compatibility

Changes:

• app/submit/page.tsx: Added repo-link-box class to the link container
• app/globals.css: Added responsive CSS rule to wrap long text on small screens

Result:
The GitHub link now wraps across multiple lines on mobile instead of
causing horizontal scroll, improving mobile UX.