fix: horizontal scroll for suggestion chips on mobile#26
Conversation
- Change from flex-wrap to horizontal scroll on mobile - Keep flex-wrap behavior on desktop (sm: breakpoint) - Add scrollbar-hide utility to hide scrollbar on iOS/Android - Add whitespace-nowrap and shrink-0 to prevent chip text wrapping
There was a problem hiding this comment.
Pull request overview
This PR improves the mobile user experience by implementing horizontal scrolling for suggestion chips instead of vertical wrapping, following common messaging app patterns like iMessage and WhatsApp.
Key Changes:
- Added horizontal scrolling behavior for suggestion chips on mobile devices
- Maintained flex-wrap behavior for desktop viewports (sm breakpoint and above)
- Introduced a custom
scrollbar-hideutility class to hide scrollbars while preserving scroll functionality
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| src/styles/global.css | Added scrollbar-hide utility class to hide scrollbars across browsers while maintaining scroll functionality |
| src/features/chat/components/SuggestionChips.tsx | Modified container and button styling to enable horizontal scrolling on mobile with whitespace and shrink controls |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <div className={cn('flex flex-wrap gap-2', className)}> | ||
| <div | ||
| className={cn( | ||
| 'flex gap-2 overflow-x-auto pb-1 -mb-1 scrollbar-hide', |
There was a problem hiding this comment.
The negative margin pattern (pb-1 -mb-1) is used to hide the scrollbar space, but this approach can be fragile and may cause layout issues with parent containers. Consider using overflow-x-auto scrollbar-hide without the padding/margin trick, as the scrollbar-hide class should already handle hiding the scrollbar without requiring layout adjustments.
| 'flex gap-2 overflow-x-auto pb-1 -mb-1 scrollbar-hide', | |
| 'flex gap-2 overflow-x-auto scrollbar-hide', |
| className={cn( | ||
| 'flex gap-2 overflow-x-auto pb-1 -mb-1 scrollbar-hide', | ||
| // Wrap on desktop, scroll on mobile | ||
| 'sm:flex-wrap', |
There was a problem hiding this comment.
The desktop wrapping behavior restores at sm breakpoint (typically 640px), but this may be too early for tablets in portrait mode. Consider using md:flex-wrap (768px) instead to ensure a better experience on tablet devices, which would benefit more from the horizontal scroll pattern.
| 'sm:flex-wrap', | |
| 'md:flex-wrap', |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
vibes-website | 2ec19f6 | Commit Preview URL Branch Preview URL |
Dec 25 2025, 12:48 AM |
Summary
scrollbar-hideutility to hide scrollbar on iOS/Android while keeping scroll functionalityProblem
On iOS, the wrapped suggestion chips took up too much vertical space, making it hard to see the message thread.
Solution
Use the common mobile messaging pattern of horizontal scrolling for quick replies (like iMessage/WhatsApp).
Test Plan