Fix: Improve search text wrapping and spacing

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

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>