refactor: make onboarding components responsive

[RajdeepDs]

Summary by CodeRabbit

• Style
  • Improved responsive layouts across onboarding steps (Choose Style, Invite, Ready) for clearer presentation on small screens and optimized grid/row layouts on larger screens.
  • Updated theme preview images to WebP in onboarding and Preferences for sharper visuals and reduced load times.

[coderabbitai]

Walkthrough

Updates adjust responsive layouts for onboarding components and switch certain UI preview assets from PNG to WebP. No logic, state, or public API changes.

Changes

Cohort / File(s)	Summary of Changes
Onboarding layout tweaks apps/app/src/components/onboarding/choose-style.tsx, apps/app/src/components/onboarding/invite.tsx, apps/app/src/components/onboarding/ready.tsx	Updated responsive classNames: vertical-to-horizontal layout shifts, divider orientation changes, and width constraints. No logic changes. Also switched preview images in choose-style to WebP.
Settings interface asset update apps/app/src/components/settings/preferences/interface-select.tsx	Switched Light/Dark/System preview images from PNG to WebP. No structural or logic changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Suggested labels

core, enhancement

Poem

A rabbit taps through styles so spry,
WebP whispers, “I’m lighter!”—oh my!
Grids flip and flow, dividers align,
Cards snug their widths, looking fine.
With nary a bug nor API fright—
Hop, hop, commit—UI just right. 🐇✨

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between a4d97de and dfdf301.

⛔ Files ignored due to path filters (3)

• apps/app/public/ui-dark.png is excluded by !**/*.png
• apps/app/public/ui-light.png is excluded by !**/*.png
• apps/app/public/ui-system.png is excluded by !**/*.png

📒 Files selected for processing (4)

• apps/app/src/components/onboarding/choose-style.tsx (1 hunks)
• apps/app/src/components/onboarding/invite.tsx (1 hunks)
• apps/app/src/components/onboarding/ready.tsx (1 hunks)
• apps/app/src/components/settings/preferences/interface-select.tsx (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (1)

apps/app/src/components/onboarding/invite.tsx (1)

packages/ui/src/components/label.tsx (1)

• Label (23-23)

🔇 Additional comments (5)

apps/app/src/components/settings/preferences/interface-select.tsx (1)

13-15: Assets Verified & Fallback Covered

• All three WebP files exist under apps/app/public/:
  • apps/app/public/ui-light.webp
  • apps/app/public/ui-dark.webp
  • apps/app/public/ui-system.webp
• Next.js’s built-in <Image> optimizer will automatically negotiate and serve a JPEG/PNG fallback to browsers without WebP support—no separate PNG source needed as long as you’re using the Image component with its optimizer enabled.
• There’s currently no custom images.formats setting in apps/app/next.config.ts; you can add formats (e.g. ['image/avif','image/webp']) if you’d like AVIF support alongside WebP.
• If you ever switch to a plain <img> tag or set unoptimized={true}, you’ll need your own <picture>-based or onError fallback strategy.

apps/app/src/components/onboarding/ready.tsx (1)

46-46: Responsive grid improvement looks good

Switching to a 3-row stack by default and to 3 columns at lg with corresponding divider toggles is clean and predictable. LGTM.

apps/app/src/components/onboarding/choose-style.tsx (1)

40-40: Responsive RadioGroup container: LGTM

Defaulting to a vertical stack with horizontal dividers and switching to a horizontal row with vertical dividers at sm aligns with the PR goals and improves small-screen UX.

apps/app/src/components/onboarding/invite.tsx (2)

83-83: Container width change improves small-screen readability

Using max-w-sm by default with sm:max-w-full prevents overly wide content on tiny screens and expands appropriately on larger ones. LGTM.

---

91-91: Responsive input row width is appropriate

w-full on small screens with sm:w-lg strikes a good balance between readability and layout stability. LGTM.

✨ Finishing Touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment
• Commit unit tests in branch refactor-onboarding

---

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.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.

Support

Need help? Create a ticket on our support page for assistance with any issues or questions.

CodeRabbit Commands (Invoked using PR/Issue comments)

Type @coderabbitai help to get the list of available commands.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Status, Documentation and Community

• Visit our Status Page to check the current availability of CodeRabbit.
• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.