Fix: Mobile layout overflow caused by long Github repository link issue 37 #54
Conversation
WalkthroughThe changes add responsive CSS styling to fix text overflow on mobile devices by applying word-wrapping rules to the Changes
Estimated code review effort🎯 1 (Trivial) | ⏱️ ~3 minutes These are straightforward styling-only changes with no logic modifications or control flow impact. The additions are minimal and follow a simple pattern for responsive design. Possibly related issues
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
app/submit/page.tsx (1)
186-186: Consider using Tailwind utility classes instead of custom CSS.The
repo-link-boxclass addition works correctly and solves the mobile overflow issue. However, since the project uses Tailwind CSS, you could achieve the same result with built-in utility classes and eliminate the need for custom CSS inglobals.css.Apply this diff to use Tailwind utilities:
- <p className="text-gray-700 repo-link-box"> + <p className="text-gray-700 max-md:break-words">This applies
break-wordsonly on screens smaller thanmd(768px), matching your media query breakpoint. If you prefer this approach, you can remove the corresponding CSS block fromglobals.css(lines 96-102).
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (2)
app/globals.css(1 hunks)app/submit/page.tsx(1 hunks)
| @media (max-width: 768px) { | ||
| .repo-link-box { | ||
| overflow-wrap: break-word; | ||
| word-break: break-word; | ||
| word-wrap: break-word; | ||
| } | ||
| } |
There was a problem hiding this comment.
Replace deprecated word-break: break-word with standard properties.
The media query correctly targets mobile devices and solves the overflow issue. However, Line 99 uses word-break: break-word, which is a deprecated/non-standard value that was removed from the CSS specification.
Apply this diff to use only standard properties:
@media (max-width: 768px) {
.repo-link-box {
overflow-wrap: break-word;
- word-break: break-word;
word-wrap: break-word;
}
}The combination of overflow-wrap: break-word (modern) and word-wrap: break-word (legacy fallback) provides the same functionality with better cross-browser compatibility using standard properties only.
🤖 Prompt for AI Agents
In app/globals.css around lines 96 to 102, the rule uses the non‑standard value
"word-break: break-word"; remove that property and rely on the standard
combination of "overflow-wrap: break-word" plus the legacy fallback "word-wrap:
break-word" inside the media query to achieve the same behavior with proper
cross‑browser compatibility.
1 participant
Fix mobile responsiveness: prevent GitHub link horizontal overflow
TEAM NULL
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:
paragraph containing the GitHub link
Changes:
Result:
The GitHub link now wraps across multiple lines on mobile instead of
causing horizontal scroll, improving mobile UX.
Summary by CodeRabbit
Style
✏️ Tip: You can customize this high-level summary in your review settings.