Conversation
- Use smaller font (text-xs) for curl command on mobile to prevent wrapping - Use smaller buttons (md sizing) on mobile for better proportions - Both changes scale up to original sizes on sm breakpoint
There was a problem hiding this comment.
Pull request overview
This PR improves the mobile layout of the Vibes product page by adjusting font sizes and button dimensions to prevent awkward wrapping and improve visual proportions on small screens. Changes scale up to original sizes at the sm breakpoint (640px).
- Reduces curl command font size on mobile to prevent wrapping
- Adjusts button sizing on mobile for better proportions
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/routes/products/vibes.tsx | Adds responsive sizing classes to both buttons for mobile optimization |
| src/components/products/CodeBlock/CodeBlock.tsx | Changes font size to be smaller on mobile with responsive scaling |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| <div className="flex items-center justify-center gap-4"> | ||
| <Button asChild size="lg"> | ||
| <Button asChild size="lg" className="h-10 px-5 text-sm sm:h-12 sm:px-7 sm:text-base"> |
There was a problem hiding this comment.
The className prop overrides the size='lg' prop's built-in styling. Consider removing the size prop or creating a custom size variant instead of using className overrides, as this pattern can lead to confusion and maintenance issues when the Button component's size definitions change.
| variant="outline" | ||
| asChild | ||
| size="lg" | ||
| className="h-10 px-5 text-sm sm:h-12 sm:px-7 sm:text-base" |
There was a problem hiding this comment.
This duplicates the same responsive styling from the button above. Consider extracting these classes into a shared constant (e.g., const responsiveButtonClasses = 'h-10 px-5 text-sm sm:h-12 sm:px-7 sm:text-base') to maintain consistency and reduce duplication.
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
vibes-website | 2b21ad4 | Commit Preview URL Branch Preview URL |
Dec 28 2025, 01:30 AM |
Summary
Test Plan