fix: Améliorer z-index du champ de recherche et des icônes

- Ajouter z-index plus élevé pour le champ de recherche et ses icônes
- Assurer que les icônes ne bloquent pas les interactions
- Corriger problème d'affichage où le texte était masqué
This commit is contained in:
senke 2026-01-18 13:30:54 +01:00
parent a7277abdba
commit e3a40cc8aa

View file

@ -157,21 +157,21 @@ export function SearchPage() {
<Card className="mb-6 relative z-10">
<CardContent className="pt-6 relative z-10">
<form onSubmit={handleSearch} className="space-y-4">
<div className="relative">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground" />
<div className="relative z-20">
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-muted-foreground z-10 pointer-events-none" />
<Input
type="text"
placeholder="Search tracks, playlists, users..."
value={searchQuery}
onChange={(e) => setSearchQuery(e.target.value)}
className="pl-10 pr-10"
className="pl-10 pr-10 relative z-10"
/>
{searchQuery && (
<Button
type="button"
variant="ghost"
size="icon"
className="absolute right-1 top-1/2 transform -translate-y-1/2 h-8 w-8"
className="absolute right-1 top-1/2 transform -translate-y-1/2 h-8 w-8 z-20"
onClick={handleClear}
>
<X className="h-4 w-4" />