fix: mobile responsiveness and sign-in flash prevention - #214
Conversation
- Add useMediaQuery hook for reactive viewport detection - Replace hardcoded SVG dimensions with viewBox for fluid scaling - Responsive SVG margins by breakpoint - Show title/algorithm name on mobile (was hidden) - Compact horizontal badge layout on small screens - Touch-friendly tooltip (tap to toggle, tap chart to dismiss) - Hide scale toggle on mobile to save space - Responsive axis text sizing inside SVG - Larger toggle touch target on desktop
|
Warning Review limit reached
Next review available in: 47 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (2)
📝 WalkthroughWalkthroughThe pull request adds a reusable media-query hook, responsive complexity chart and console layouts, touch tooltip interactions, updated avatar visibility logic, and responsive Pro waitlist rendering with stored-email-based initialization. ChangesComplexity Panel Responsiveness
Output Console Responsive Controls
User Menu Loading State
Pro Waitlist Page Updates
Estimated code review effort: 3 (Moderate) | ~25 minutes Possibly related PRs
Suggested labels: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 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 |
Codecov Report❌ Patch coverage is
📢 Thoughts on this report? Let us know! |
Preview for Bayan Flow Staging ready!
Preview alias |
![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
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/components/ComplexityPanel.jsx (1)
306-321: 🎯 Functional Correctness | 🟠 Major | 🏗️ Heavy liftResolve mobile taps at the chart level, not on 3-unit markers.
At Line 317, the 50 points become about 5.7px apart on a 320px-wide SVG, while each clickable marker is only about 3px wide. Taps cannot reliably select a point; larger per-point hit areas would overlap. Convert the SVG click coordinate to the nearest graph point, and dismiss only when no point is selected.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/components/ComplexityPanel.jsx` around lines 306 - 321, The chart currently relies on tiny 3-unit marker click targets, making mobile point selection unreliable. Move point selection to the chart-level SVG handler, convert the tap’s SVG coordinate to the nearest graph point using the existing scales/data, and call handlePointInteraction for that point; dismiss only when no point is found. Remove or bypass per-marker click handling while preserving hover behavior.
🧹 Nitpick comments (1)
src/hooks/useMediaQuery.test.js (1)
79-87: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAssert that the listener is actually removed.
This passes even if cleanup is omitted, so it cannot catch a leaked media-query subscription.
Proposed test update
- // Should not throw on unmount - expect(() => unmount()).not.toThrow(); + expect(listeners).toHaveLength(1); + unmount(); + expect(listeners).toHaveLength(0);🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/hooks/useMediaQuery.test.js` around lines 79 - 87, Strengthen the “should clean up listener on unmount” test by spying on the media-query listener removal API and asserting it is called during unmount. Keep the existing render and no-throw checks, and target the listener cleanup performed by useMediaQuery rather than only verifying that unmount completes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/ProComingSoonPage.jsx`:
- Around line 72-74: Update the submitState initialization in ProComingSoonPage
to mark a user as already_joined only when the stored waitlist email matches the
current authenticated user or profile email; otherwise keep idle and preserve
the prefilled-email behavior. Also handle identity changes by re-evaluating or
clearing stale stored state, and add a regression test covering different stored
and authenticated emails.
---
Outside diff comments:
In `@src/components/ComplexityPanel.jsx`:
- Around line 306-321: The chart currently relies on tiny 3-unit marker click
targets, making mobile point selection unreliable. Move point selection to the
chart-level SVG handler, convert the tap’s SVG coordinate to the nearest graph
point using the existing scales/data, and call handlePointInteraction for that
point; dismiss only when no point is found. Remove or bypass per-marker click
handling while preserving hover behavior.
---
Nitpick comments:
In `@src/hooks/useMediaQuery.test.js`:
- Around line 79-87: Strengthen the “should clean up listener on unmount” test
by spying on the media-query listener removal API and asserting it is called
during unmount. Keep the existing render and no-throw checks, and target the
listener cleanup performed by useMediaQuery rather than only verifying that
unmount completes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 96c22f59-e1bc-4f76-b7cd-1a11147dfee1
📒 Files selected for processing (7)
src/components/ComplexityPanel.jsxsrc/components/ComplexityPanel.test.jsxsrc/components/OutputConsole.jsxsrc/components/UserMenu.jsxsrc/hooks/useMediaQuery.jssrc/hooks/useMediaQuery.test.jssrc/pages/ProComingSoonPage.jsx
Prevent a stale waitlist email in localStorage from showing 'already_joined' to a different user on the same browser. Only mark as already_joined when the stored email matches the authenticated user's email, and re-evaluate when auth state loads. Adds regression test for cross-user stored email scenario.
|
Fixed the CodeRabbit review comment: the stored waitlist email is now scoped to the current user. Only marks |
1 participant
Contribution workflow
develop: This PR targetsdevelop, notmain.Description
Fixes several mobile responsiveness issues and prevents a sign-in button flash on the landing page for authenticated users. The changes improve the UX on small screens across the complexity panel, Python code panel, and the /pro page.
Type of Change
Related Issues
Changes Made
UserMenu.jsxto returnnullduring auth loading state whenhideAvataris true, preventing a flash of the sign-in button for authenticated userspreserveAspectRatio, added responsive margins/text sizes viauseMediaQueryhook, made complexity badges wrap horizontally on mobile, added touch-friendly tap-to-toggle tooltip on data pointsuseMediaQueryhook: Reactive CSS media query hook following the same pattern asuseIsBelowLgbut accepting any validmatchMediaqueryw-7 sm:w-8 lg:w-12), gap and padding scale with breakpoints, waitlist form skips for users who already joinedTesting
pnpm test:run)Test Results
Code Quality
pnpm lint)pnpm format:check)Performance Impact
Breaking Changes
Checklist
Summary by CodeRabbit