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:
parent
a7277abdba
commit
e3a40cc8aa
1 changed files with 4 additions and 4 deletions
|
|
@ -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" />
|
||||
|
|
|
|||
Loading…
Reference in a new issue