Fix mobile UI/UX for app and marketing site#50
Conversation
Marketing site (public/): - Add a tap-to-open hamburger menu below 560px; previously the nav links vanished entirely, leaving no way to navigate on phones. - Guard against horizontal scroll (overflow-x: clip on html, word-break on display headings). - Let the demo result header wrap so the reliability badge no longer squeezes the task text on narrow screens. - Cap modals to 92vw so they never overflow the viewport. App (src/): - Add a small-phone (<=560px) breakpoint: tighter shell/panel padding and a vertically-stacked onboarding Record→Learn→Replay flow instead of a cramped 3-column row. - Mirror the overflow-x / heading-wrap guards into the shared design system. - Cap analysis/settings modals to 92vw. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ly3R3zUAYE4GmDqePK8UGh
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
✅ Deploy Preview for muhammadghost ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 5777a371fc
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| .nav__toggle { | ||
| display: flex; | ||
| margin-left: auto; | ||
| } |
There was a problem hiding this comment.
At the <=560px breakpoint this makes the 44px hamburger visible while the existing header Download CTA remains visible after it (.nav .btn { width: auto } below). On the supported 320px CSS viewport, .site-shell is only 292px wide and the nav content area is 268px after padding, so the brand + hamburger + Download button + two 20px gaps cannot fit; with the new overflow-x: clip, the overflow is clipped rather than scrollable. Hide the standalone CTA at this breakpoint or move it into the dropdown so small-phone users can still reach the full control.
Useful? React with 👍 / 👎.
| .nav__links { | ||
| position: absolute; | ||
| top: calc(100% + 10px); |
There was a problem hiding this comment.
I checked the later 2026 refresh block in this same stylesheet, which still resets .nav and the following hero/sections to position: relative; z-index: 1 after this media query. Because the new menu is absolutely positioned under the header, opening it on phones puts it over the hero area, but the hero's equal-z-index stacking context is later in the DOM and can paint above the dropdown, hiding or intercepting most of its links. Give the mobile nav/dropdown a higher z-index after the refresh block so the menu remains visible and clickable.
Useful? React with 👍 / 👎.
2 participants
Summary
Fixes a set of mobile UI/UX bugs across both the desktop app shell (
src/) and the marketing website (public/).Marketing site (
public/)How it helps,Examples,Privacy,Try it) weredisplay: none, leaving phone users with no way to navigate. Added an accessible tap-to-open hamburger dropdown (aria-expanded/aria-controls, closes on link tap, outside click, and resize back to desktop).overflow-x: cliponhtml(keepsposition: stickyworking) plusoverflow-wrap: break-wordon display headings so long words / oversized type don't punch through the viewport.min(…, 92vw)so they never overflow the viewport.App (
src/)<=560px) breakpoint: tighter shell/panel/mission padding, and the onboarding Record → Learn → Replay flow now stacks vertically (arrows rotate to point down) instead of cramming three columns + arrows into the narrow card.overflow-x/ heading-wrap guards into the shared design system (styles.css).min(…, 92vw).Notes
invokecalls were touched, so the IPC contract is unchanged.src/andpublic/shared pieces were updated in parallel by hand, per the repo's sync guidance; the new hamburger markup/JS is marketing-site only.🤖 Generated with Claude Code
https://claude.ai/code/session_01Ly3R3zUAYE4GmDqePK8UGh
Generated by Claude Code