pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-23 09:11:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix: Improve search text wrapping and spacing

Browse Source
This commit is contained in:
gpt-engineer-app[bot]
2025-09-30 12:03:15 +00:00
parent 0d71e99203
commit 50aa55ecbe
5 changed files with 30 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/search/AutocompleteSearch.tsx
View File

@@ -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 && (
<>

14
src/components/search/MobileSearch.tsx
View File

@@ -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>

12
src/components/search/SearchDropdown.tsx
View File

@@ -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>
)}