From 2ec19f6b47b489d258b612a086861217220add23 Mon Sep 17 00:00:00 2001
From: Alex Kwiatkowski <alex+git@fremantle.io>
Date: Wed, 24 Dec 2025 16:47:15 -0800
Subject: [PATCH] fix: horizontal scroll for suggestion chips on mobile

- 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
---
 src/features/chat/components/SuggestionChips.tsx | 11 +++++++++--
 src/styles/global.css                            | 11 +++++++++++
 2 files changed, 20 insertions(+), 2 deletions(-)

diff --git a/src/features/chat/components/SuggestionChips.tsx b/src/features/chat/components/SuggestionChips.tsx
index cf14d93..8759cfe 100644
--- a/src/features/chat/components/SuggestionChips.tsx
+++ b/src/features/chat/components/SuggestionChips.tsx
@@ -9,14 +9,21 @@ interface SuggestionChipsProps {
 
 export function SuggestionChips({ options, onSelect, className }: SuggestionChipsProps) {
   return (
-    <div className={cn('flex flex-wrap gap-2', className)}>
+    <div
+      className={cn(
+        'flex gap-2 overflow-x-auto pb-1 -mb-1 scrollbar-hide',
+        // Wrap on desktop, scroll on mobile
+        'sm:flex-wrap',
+        className,
+      )}
+    >
       {options.map((option) => (
         <button
           key={option.value}
           type="button"
           onClick={() => onSelect(option.value, option.label)}
           className={cn(
-            'px-3 py-1.5 text-sm rounded-full border transition-colors',
+            'px-3 py-1.5 text-sm rounded-full border transition-colors whitespace-nowrap shrink-0',
             'bg-background hover:bg-accent/10 hover:border-accent/50',
             'focus:outline-none focus:ring-2 focus:ring-accent focus:ring-offset-2',
           )}
diff --git a/src/styles/global.css b/src/styles/global.css
index 5392e3a..fd4bf78 100644
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -43,3 +43,14 @@
     }
   }
 }
+
+@layer utilities {
+  /* Hide scrollbar while maintaining scroll functionality */
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+}