chore: adjust buttons layout #1017
Conversation
WalkthroughThis PR adjusts UI layout/styling for CTAs and buttons across HomePage components: switches button widths to fit-content, updates Header CTA container to a wrapping flex with gaps, increases spacing in RecordingModes, and applies fixed max-width and icon positioning in UpgradeToPro. No logic or public API changes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Suggested labels
Suggested reviewers
Poem
Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches
🧪 Generate unit tests
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: 0
🧹 Nitpick comments (6)
apps/web/components/pages/_components/UpgradeToPro.tsx (2)
20-20: Make button width content‑based for consistencyAll other CTAs moved to w-fit; keeping w-full here makes this one feel wider than intended up to 220px. Recommend w-fit + the cap.
- className="flex overflow-visible w-full max-w-[220px] relative gap-3 justify-evenly items-center cursor-pointer" + className="flex overflow-visible w-fit max-w-[220px] relative gap-3 justify-evenly items-center cursor-pointer"
30-30: Remove conflicting vertical positioning (inset-y-0 vs bottom%)absolute + inset-y-0 + my-auto conflicts with explicit bottom-[22.5%] and fixed height; can cause odd stretching. Drop inset centering when using bottom%.
- <ProRive className="w-[80px] scale-[0.9] h-[62px] bottom-[22.5%] -left-2 absolute inset-y-0 my-auto" /> + <ProRive className="absolute -left-2 bottom-[22.5%] w-[80px] h-[62px] scale-[0.9]" />apps/web/components/pages/HomePage/RecordingModes.tsx (1)
160-160: Prevent button label wrapping/CLSThe download label length varies by platform; w-fit can cause wrapping/jitter. Add whitespace-nowrap.
- className="flex justify-center items-center w-fit font-medium" + className="flex justify-center items-center w-fit font-medium whitespace-nowrap"apps/web/components/ReadyToGetStarted.tsx (1)
29-29: Keep CTA text on one lineMatch other CTAs and avoid wrap with whitespace-nowrap.
- className="font-medium w-fit" + className="font-medium w-fit whitespace-nowrap"apps/web/components/pages/HomePage/Header.tsx (2)
121-121: Center wrapped CTAs for balanceOptional: add justify-center so two buttons center when wrapping, aligning with other sections.
- className="flex flex-wrap gap-4 items-center mb-5" + className="flex flex-wrap gap-4 items-center justify-center mb-5"
135-135: Use w-fit for consistency and add nowrapOther CTAs use w-fit; max-w-fit alone depends on Button defaults. Also add whitespace-nowrap to avoid label wrap.
- className="flex justify-center items-center font-medium max-w-fit" + className="flex justify-center items-center font-medium w-fit whitespace-nowrap"
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
apps/web/components/ReadyToGetStarted.tsx(1 hunks)apps/web/components/pages/HomePage/Header.tsx(2 hunks)apps/web/components/pages/HomePage/RecordingModes.tsx(2 hunks)apps/web/components/pages/_components/UpgradeToPro.tsx(2 hunks)
🧰 Additional context used
📓 Path-based instructions (4)
apps/web/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
apps/web/**/*.{ts,tsx}: Use TanStack Query v5 for client-side server state and data fetching in the web app
Mutations should call Server Actions and perform precise cache updates with setQueryData/setQueriesData, avoiding broad invalidations
Prefer Server Components for initial data and pass initialData to client components for React Query hydration
Files:
apps/web/components/ReadyToGetStarted.tsxapps/web/components/pages/HomePage/RecordingModes.tsxapps/web/components/pages/_components/UpgradeToPro.tsxapps/web/components/pages/HomePage/Header.tsx
{apps/web,packages/ui}/**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
{apps/web,packages/ui}/**/*.{ts,tsx}: Use Tailwind CSS exclusively for styling in the web app and shared React UI components
Component naming: React components in PascalCase; hooks in camelCase starting with 'use'
Files:
apps/web/components/ReadyToGetStarted.tsxapps/web/components/pages/HomePage/RecordingModes.tsxapps/web/components/pages/_components/UpgradeToPro.tsxapps/web/components/pages/HomePage/Header.tsx
**/*.{ts,tsx}
📄 CodeRabbit inference engine (CLAUDE.md)
Use strict TypeScript and avoid any; prefer shared types from packages
**/*.{ts,tsx}: Use Biome to format/lint TypeScript with a 2-space indent
TypeScript file names should be kebab-case (e.g., user-menu.tsx)
Files:
apps/web/components/ReadyToGetStarted.tsxapps/web/components/pages/HomePage/RecordingModes.tsxapps/web/components/pages/_components/UpgradeToPro.tsxapps/web/components/pages/HomePage/Header.tsx
**/*.{tsx,jsx}
📄 CodeRabbit inference engine (AGENTS.md)
React/Solid components should be named using PascalCase
Files:
apps/web/components/ReadyToGetStarted.tsxapps/web/components/pages/HomePage/RecordingModes.tsxapps/web/components/pages/_components/UpgradeToPro.tsxapps/web/components/pages/HomePage/Header.tsx
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (3)
- GitHub Check: Build Desktop (aarch64-apple-darwin, macos-latest)
- GitHub Check: Build Desktop (x86_64-pc-windows-msvc, windows-latest)
- GitHub Check: Analyze (rust)
🔇 Additional comments (1)
apps/web/components/pages/HomePage/RecordingModes.tsx (1)
151-151: LGTM: clearer spacing on the CTA rowThe wrap + spacing reads better on small screens.
Summary by CodeRabbit