pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-24 10:31:12 -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

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