fix: make onboarding responsive - #237
Conversation
📝 WalkthroughWalkthroughThe onboarding flow now initializes the profile host after mount and uses responsive layout and control styles. The Redis service now uses the pinned ChangesOnboarding flow
Redis image version
Estimated code review effort: 2 (Simple) | ~15 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint install failed: one or more packages not found in the registry. 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)
docker-compose.yml (1)
17-17: 🔒 Security & Privacy | 🔵 Trivial | ⚡ Quick winPin the Redis image by digest for reproducible deployments.
Replace
redis:8.8.1with the resolved multi-platform manifest digest:Proposed change
- image: redis:8.8.1 + image: redis@sha256:3eafabb4c93fcb8b36b666e07a43f096cb157bc6b07dce4b2492b895c63cf37f🤖 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 `@docker-compose.yml` at line 17, Update the Redis service’s image reference from the version tag in docker-compose.yml to the resolved multi-platform manifest digest, preserving the existing Redis image while ensuring reproducible deployments.Source: MCP tools
🤖 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 `@apps/web/components/onboarding-wizard.tsx`:
- Around line 502-512: Update the CardFooter action layout in the onboarding
wizard so mobile rendering preserves the DOM order, with Back before Complete
Setup. Replace the reversing flex direction or explicitly apply responsive order
classes, while preserving the existing desktop arrangement and alignment
behavior.
---
Nitpick comments:
In `@docker-compose.yml`:
- Line 17: Update the Redis service’s image reference from the version tag in
docker-compose.yml to the resolved multi-platform manifest digest, preserving
the existing Redis image while ensuring reproducible deployments.
🪄 Autofix
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: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro Plus
Run ID: 922fb4bf-1edc-4ec0-a4c7-3c9836fb17a9
📒 Files selected for processing (3)
apps/web/app/onboarding/page.tsxapps/web/components/onboarding-wizard.tsxdocker-compose.yml
| <CardFooter | ||
| className={`flex flex-col-reverse items-stretch gap-3 border-t bg-muted/10 px-4 pt-6 sm:flex-row sm:items-center sm:px-6 ${ | ||
| step === 1 ? 'sm:justify-end' : 'sm:justify-between' | ||
| }`} | ||
| > | ||
| {step !== 1 && ( | ||
| <Button | ||
| key="back-btn" | ||
| type="button" | ||
| variant="outline" | ||
| className="w-full sm:w-auto" |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Keep the mobile action order consistent with the DOM.
On step 2, the DOM lists Back before Complete Setup, but flex-col-reverse renders Complete Setup above Back on narrow screens. Keyboard and screen-reader focus still follows the DOM, so the visual and interaction order differ. Use flex-col or reorder the buttons and restore the desktop order with responsive order-* classes.
Proposed minimal fix
- className={`flex flex-col-reverse items-stretch gap-3 border-t bg-muted/10 px-4 pt-6 sm:flex-row sm:items-center sm:px-6 ${
+ className={`flex flex-col items-stretch gap-3 border-t bg-muted/10 px-4 pt-6 sm:flex-row sm:items-center sm:px-6 ${📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <CardFooter | |
| className={`flex flex-col-reverse items-stretch gap-3 border-t bg-muted/10 px-4 pt-6 sm:flex-row sm:items-center sm:px-6 ${ | |
| step === 1 ? 'sm:justify-end' : 'sm:justify-between' | |
| }`} | |
| > | |
| {step !== 1 && ( | |
| <Button | |
| key="back-btn" | |
| type="button" | |
| variant="outline" | |
| className="w-full sm:w-auto" | |
| <CardFooter | |
| className={`flex flex-col items-stretch gap-3 border-t bg-muted/10 px-4 pt-6 sm:flex-row sm:items-center sm:px-6 ${ | |
| step === 1 ? 'sm:justify-end' : 'sm:justify-between' | |
| }`} | |
| > | |
| {step !== 1 && ( | |
| <Button | |
| key="back-btn" | |
| type="button" | |
| variant="outline" | |
| className="w-full sm:w-auto" |
🤖 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 `@apps/web/components/onboarding-wizard.tsx` around lines 502 - 512, Update the
CardFooter action layout in the onboarding wizard so mobile rendering preserves
the DOM order, with Back before Complete Setup. Replace the reversing flex
direction or explicitly apply responsive order classes, while preserving the
existing desktop arrangement and alignment behavior.
1 participant
Description
latesttag.Link to issue or ticket
N/A
Steps to QA
docker compose configand confirm the Redis service resolves toredis:8.8.1.npm test --workspace=api -- --runInBandand confirm all 125 tests pass.npx turbo run lint,npx turbo run check-types, andnpm run format:check.Screenshots
Before
After
Summary by CodeRabbit