From 444bc12a5be294cd45d75fe4e9cd6e856161605d Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Tue, 30 Sep 2025 21:19:08 +0000
Subject: [PATCH] Refactor AutocompleteSearch for mobile

---
 src/components/search/AutocompleteSearch.tsx | 22 ++++++++++----------
 1 file changed, 11 insertions(+), 11 deletions(-)

diff --git a/src/components/search/AutocompleteSearch.tsx b/src/components/search/AutocompleteSearch.tsx
index f0058abc..06fbf4e9 100644
--- a/src/components/search/AutocompleteSearch.tsx
+++ b/src/components/search/AutocompleteSearch.tsx
@@ -259,7 +259,7 @@ export function AutocompleteSearch({
               <div
                 key={item.id}
                 onClick={() => handleResultClick(item)}
-                className={`flex items-center gap-3 p-3 rounded-lg cursor-pointer transition-colors ${
+                className={`flex items-start gap-2 sm:gap-3 p-2 sm:p-3 rounded-lg cursor-pointer transition-colors ${
                   index === selectedIndex
                     ? 'bg-accent/10 border border-accent/20'
                     : 'hover:bg-muted/50'
@@ -267,32 +267,32 @@ export function AutocompleteSearch({
               >
                 {item.type === 'suggestion' ? (
                   <>
-                    <Clock className="w-4 h-4 text-muted-foreground" />
-                    <div className="flex-1">
-                      <div className="font-medium">{item.title}</div>
+                    <Clock className="w-4 h-4 text-muted-foreground flex-shrink-0 mt-0.5" />
+                    <div className="flex-1 min-w-0">
+                      <div className="font-medium truncate">{item.title}</div>
                     </div>
                   </>
                 ) : (
                   <>
                     <div className="flex-1 min-w-0">
-                      <div className="flex items-center justify-between gap-2">
-                        <div className="flex items-center gap-2 min-w-0">
-                          <span className="font-semibold text-foreground truncate">{item.title}</span>
-                          <Badge variant="outline" className={`text-xs font-medium ${getTypeColor(item.type)}`}>
+                      <div className="flex flex-col sm:flex-row sm:items-center gap-1.5 sm:gap-2">
+                        <div className="flex items-center gap-1.5 sm:gap-2 min-w-0">
+                          <span className="font-semibold text-foreground text-sm sm:text-base line-clamp-1">{item.title}</span>
+                          <Badge variant="outline" className={`text-[10px] sm:text-xs font-medium whitespace-nowrap ${getTypeColor(item.type)}`}>
                             {getTypeLabel(item.type)}
                           </Badge>
                         </div>
                         {item.subtitle && (
-                          <Badge variant="secondary" className="text-xs flex-shrink-0">
+                          <Badge variant="secondary" className="text-[10px] sm:text-xs whitespace-nowrap w-fit">
                             {item.subtitle}
                           </Badge>
                         )}
                       </div>
                     </div>
                     {((item as SearchResult).rating ?? 0) > 0 && (
-                      <div className="flex items-center gap-1 ml-3">
+                      <div className="flex items-center gap-1 flex-shrink-0">
                         <Zap className="w-3 h-3 text-yellow-500" />
-                        <span className="text-sm font-medium">{(item as SearchResult).rating!.toFixed(1)}</span>
+                        <span className="text-xs sm:text-sm font-medium">{(item as SearchResult).rating!.toFixed(1)}</span>
                       </div>
                     )}
                   </>