From 50aa55ecbe89b0484c98bf2ac1fa5f95667232a9 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 12:03:15 +0000
Subject: [PATCH] Fix: Improve search text wrapping and spacing

---
 src/components/layout/Header.tsx             | 14 +++++++-------
 src/components/search/AutocompleteSearch.tsx | 17 +++++++++--------
 src/components/search/MobileSearch.tsx       | 14 +++++++-------
 src/components/search/SearchDropdown.tsx     | 12 ++++++------
 src/components/ui/input.tsx                  |  2 +-
 5 files changed, 30 insertions(+), 29 deletions(-)

diff --git a/src/components/layout/Header.tsx b/src/components/layout/Header.tsx
index 03cb0407..fbd89e3f 100644
--- a/src/components/layout/Header.tsx
+++ b/src/components/layout/Header.tsx
@@ -31,9 +31,9 @@ export function Header() {
   return (
     <>
       <header className="sticky top-0 z-40 w-full border-b border-border/40 bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-        <div className="container flex h-14 md:h-16 items-center justify-between px-3 md:px-4">
+        <div className="container flex h-14 md:h-16 items-center justify-between gap-2 md:gap-4 px-3 md:px-4">
           {/* Mobile: Menu + Logo */}
-          <div className="flex items-center gap-2 md:gap-6 flex-1 md:flex-initial">
+          <div className="flex items-center gap-2 md:gap-6 flex-1 md:flex-initial min-w-0">
             {/* Mobile Menu */}
             <Sheet open={open} onOpenChange={setOpen}>
               <SheetTrigger asChild>
@@ -108,8 +108,8 @@ export function Header() {
             </Sheet>
 
             {/* Logo */}
-            <Link to="/" className="flex items-center hover:opacity-80 transition-opacity">
-              <span className="font-bold text-lg md:text-xl bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent">
+            <Link to="/" className="flex items-center hover:opacity-80 transition-opacity flex-shrink-0">
+              <span className="font-bold text-base sm:text-lg md:text-xl bg-gradient-to-r from-primary to-accent bg-clip-text text-transparent whitespace-nowrap">
                 ThrillWiki
               </span>
             </Link>
@@ -215,9 +215,9 @@ export function Header() {
           </div>
 
           {/* Right side: Search, Theme, Auth */}
-          <div className="flex items-center gap-1 md:gap-2">
+          <div className="flex items-center gap-1.5 md:gap-2 flex-shrink-0">
             {/* Desktop Search */}
-            <div className="hidden lg:block w-80 xl:w-96">
+            <div className="hidden lg:block lg:w-64 xl:w-80 min-w-0">
               <SearchDropdown />
             </div>
             
@@ -225,7 +225,7 @@ export function Header() {
             <Button
               variant="ghost"
               size="icon"
-              className="lg:hidden h-9 w-9"
+              className="lg:hidden h-9 w-9 min-w-[36px]"
               onClick={() => setMobileSearchOpen(true)}
             >
               <Search className="h-5 w-5" />
diff --git a/src/components/search/AutocompleteSearch.tsx b/src/components/search/AutocompleteSearch.tsx
index 212859a6..f0058abc 100644
--- a/src/components/search/AutocompleteSearch.tsx
+++ b/src/components/search/AutocompleteSearch.tsx
@@ -200,9 +200,9 @@ export function AutocompleteSearch({
   const isHero = variant === 'hero';
 
   return (
-    <div ref={searchRef} className={`relative ${className}`}>
-      <div className="relative">
-        <Search className={`absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground ${isHero ? 'w-5 h-5' : 'w-4 h-4'}`} />
+    <div ref={searchRef} className={`relative w-full min-w-0 ${className}`}>
+      <div className="relative w-full min-w-0">
+        <Search className={`absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground flex-shrink-0 pointer-events-none ${isHero ? 'w-5 h-5' : 'w-4 h-4'}`} />
         <Input
           ref={inputRef}
           placeholder={placeholder}
@@ -210,7 +210,7 @@ export function AutocompleteSearch({
           onChange={handleInputChange}
           onFocus={handleInputFocus}
           onKeyDown={(e) => e.key === 'Enter' && handleSearch()}
-          className={`${isHero ? 'pl-12 pr-24 h-14 text-lg rounded-full' : 'pl-10 pr-10'} bg-background/95 backdrop-blur border-border/50 focus:border-primary/50 transition-all duration-300 ${
+          className={`w-full ${isHero ? 'pl-12 pr-28 sm:pr-32 h-14 text-base sm:text-lg rounded-full' : 'pl-10 pr-10'} bg-background/95 backdrop-blur border-border/50 focus:border-primary/50 transition-all duration-300 ${
             isOpen ? 'shadow-lg shadow-primary/10' : ''
           }`}
         />
@@ -219,7 +219,7 @@ export function AutocompleteSearch({
             variant="ghost"
             size="sm"
             onClick={handleClear}
-            className={`absolute ${isHero ? 'right-16 top-2 h-10 w-10' : 'right-1 top-1/2 transform -translate-y-1/2 h-8 w-8'} p-0 hover:bg-muted`}
+            className={`absolute flex-shrink-0 ${isHero ? 'right-16 sm:right-20 top-2 h-10 w-10 min-w-[40px]' : 'right-1 top-1/2 transform -translate-y-1/2 h-8 w-8'} p-0 hover:bg-muted`}
           >
             <X className="w-3 h-3" />
           </Button>
@@ -227,15 +227,16 @@ export function AutocompleteSearch({
         {isHero && (
           <Button
             onClick={handleSearch}
-            className="absolute right-2 top-2 h-10 px-6 bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 rounded-full"
+            className="absolute right-2 top-2 h-10 px-4 sm:px-6 text-sm sm:text-base min-w-[70px] bg-gradient-to-r from-primary to-secondary hover:from-primary/90 hover:to-secondary/90 rounded-full flex-shrink-0"
           >
-            Search
+            <span className="hidden xs:inline">Search</span>
+            <Search className="w-4 h-4 xs:hidden" />
           </Button>
         )}
       </div>
 
       {isOpen && displayItems.length > 0 && (
-        <div className={`absolute top-full mt-1 left-0 right-0 bg-popover border border-border rounded-lg shadow-xl z-50 max-h-96 overflow-y-auto ${isHero ? 'max-w-2xl mx-auto' : ''}`}>
+        <div className={`absolute top-full mt-1 left-0 right-0 bg-popover border border-border rounded-lg shadow-xl z-[100] max-h-96 overflow-y-auto ${isHero ? 'max-w-2xl mx-auto' : ''}`}>
           <div className="p-2">
             {query.length === 0 && showRecentSearches && suggestions.length > 0 && (
               <>
diff --git a/src/components/search/MobileSearch.tsx b/src/components/search/MobileSearch.tsx
index d549a7d7..ab110375 100644
--- a/src/components/search/MobileSearch.tsx
+++ b/src/components/search/MobileSearch.tsx
@@ -23,24 +23,24 @@ export function MobileSearch({ open, onOpenChange }: MobileSearchProps) {
       <DialogContent className="h-screen max-w-full p-0 gap-0 rounded-none">
         <div className="flex flex-col h-full">
           {/* Search Header */}
-          <div className="sticky top-0 z-10 bg-background border-b border-border p-4 space-y-3">
-            <div className="flex items-center gap-2">
+          <div className="sticky top-0 z-10 bg-background border-b border-border p-3 sm:p-4 space-y-3">
+            <div className="flex items-center gap-2 min-w-0">
               <Button
                 variant="ghost"
                 size="icon"
                 onClick={handleClose}
-                className="shrink-0"
+                className="shrink-0 h-11 w-11 min-w-[44px]"
               >
                 <X className="h-5 w-5" />
               </Button>
-              <div className="relative flex-1">
-                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+              <div className="relative flex-1 min-w-0">
+                <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4 flex-shrink-0 pointer-events-none" />
                 <Input
                   autoFocus
-                  placeholder="Search parks, rides, manufacturers..."
+                  placeholder="Search..."
                   value={query}
                   onChange={(e) => setQuery(e.target.value)}
-                  className="pl-10 h-11 text-base"
+                  className="pl-10 pr-3 h-11 text-sm w-full"
                 />
               </div>
             </div>
diff --git a/src/components/search/SearchDropdown.tsx b/src/components/search/SearchDropdown.tsx
index 80add1fd..7700e7e2 100644
--- a/src/components/search/SearchDropdown.tsx
+++ b/src/components/search/SearchDropdown.tsx
@@ -42,25 +42,25 @@ export function SearchDropdown() {
   };
 
   return (
-    <div ref={searchRef} className={`relative transition-all duration-300 ${isFocused ? 'scale-105' : ''}`}>
-      <div className="relative">
-        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4" />
+    <div ref={searchRef} className={`relative w-full min-w-0 transition-all duration-300 ${isFocused ? 'scale-105' : ''}`}>
+      <div className="relative w-full min-w-0">
+        <Search className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground w-4 h-4 flex-shrink-0" />
         <Input
           ref={inputRef}
           id="search-input"
           name="search"
-          placeholder="Search parks, rides, or manufacturers..."
+          placeholder="Search parks, rides..."
           value={query}
           onChange={handleInputChange}
           onFocus={handleInputFocus}
-          className={`pl-10 pr-4 bg-muted/50 border-border/50 focus:border-primary/50 transition-all duration-300 ${
+          className={`pl-10 pr-4 w-full bg-muted/50 border-border/50 focus:border-primary/50 transition-all duration-300 ${
             isFocused ? 'shadow-lg shadow-primary/10' : ''
           }`}
         />
       </div>
       
       {isOpen && (
-        <div className="absolute top-full mt-1 left-0 right-0 bg-card border border-border rounded-lg shadow-xl z-50 max-w-2xl">
+        <div className="absolute top-full mt-1 left-0 right-0 bg-popover border border-border rounded-lg shadow-xl z-[100] max-w-2xl">
           <SearchResults query={query} onClose={handleClose} />
         </div>
       )}
diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx
index 09700f60..fa419a45 100644
--- a/src/components/ui/input.tsx
+++ b/src/components/ui/input.tsx
@@ -8,7 +8,7 @@ const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground placeholder:truncate focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 truncate",
           className,
         )}
         ref={ref}