pacnpal/thrilltrack-explorer
1
0
Fork 0
mirror of https://github.com/pacnpal/thrilltrack-explorer.git synced 2025-12-23 21: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 && (
<>