fix(welcome): mobile layout for landing page#54
Conversation
The marketing landing page (teal.dotmavriq.life) overflowed and looked unoptimised on phones. Three fixes: - .nav-actions now wraps (flex-wrap) so the bottom "Support / Star / Log in" row can't overflow the viewport (was causing horizontal scroll). - Add a 560px breakpoint: bottom CTAs and hero CTAs go full-width stacked (bigger tap targets), top nav actions wrap onto their own line, footer stacks wordmark above links. - Terminal code block wraps the long `git clone` URL once stacked (no inner horizontal scroll) and uses smaller, tighter type on phones. Verified at 390px: zero horizontal overflow.
Qodo reviews are paused for this user.Troubleshooting steps vary by plan Learn more → On a Teams plan? Using GitHub Enterprise Server, GitLab Self-Managed, or Bitbucket Data Center? |
|
Note
|
| Layer / File(s) | Summary |
|---|---|
Flex wrapping and responsive CSS resources/views/welcome.blade.php |
Navigation container flex wrapping enabled to allow nav actions to wrap onto multiple lines. Small-screen responsive CSS added for ≤560px: terminal code blocks wrap long lines, nav/CTA groups reflow with centered alignment and full-width CTAs, terminal sizing is tightened, and footer layout stacks wordmark and links while removing left-margin spacing. |
Estimated code review effort
🎯 2 (Simple) | ⏱️ ~8 minutes
Poem
Wrap the nav, tighten the box, Stack and center on small-screen blocks, Terminal flows, footer aligns true— Mobile-first polish, responsive and new.
🚥 Pre-merge checks | ✅ 5
✅ Passed checks (5 passed)
| Check name | Status | Explanation |
|---|---|---|
| Description Check | ✅ Passed | Check skipped - CodeRabbit’s high-level summary is enabled. |
| Title check | ✅ Passed | The title directly matches the PR's primary objective: fixing mobile layout issues on the landing page. It's specific, concise, and accurately summarizes the main change. |
| Docstring Coverage | ✅ Passed | No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check. |
| Linked Issues check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
| Out of Scope Changes check | ✅ Passed | Check skipped because no linked issues were found for this pull request. |
✏️ Tip: You can configure your own custom pre-merge checks in the settings.
✨ Finishing Touches
📝 Generate docstrings
- Create stacked PR
- Commit on current branch
🧪 Generate unit tests (beta)
- Create PR with unit tests
- Commit unit tests in branch
fix/landing-mobile
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 help to get the list of available commands and usage tips.
1 participant
What
The marketing landing page (
teal.dotmavriq.life,resources/views/welcome.blade.php) overflowed horizontally and looked unoptimised on phones — specifically the terminal/code block and the bottom button row.Fixes
.nav-actionswraps (flex-wrap) so the bottom Support / Star on GitHub / Log in row can no longer overflow the viewport (it was forcing page-level horizontal scroll).560pxbreakpoint:auto.margin-lefthack.git clone …URL now wraps once the layout stacks (pre-wrap+overflow-wrap) instead of inner horizontal scrolling, with smaller/tighter mono type on phones.Verification
Rendered at 390px (iPhone width) via Playwright — 0px horizontal overflow; nav, terminal, bottom CTAs and footer all confirmed visually. CSS-only change inside the page's inline
<style>, no Vite rebuild required.🤖 Generated with Claude Code
Summary by CodeRabbit
Release Notes