Fix: nested button in theme card

This commit is contained in:
Linus Rath
2026-03-28 00:17:15 +01:00
parent ddb636ed73
commit 8eeabfc995
+7 -3
View File
@@ -174,11 +174,13 @@ interface ThemeCardProps {
function ThemeCard({ name, author, preview, isActive, isDefault, isForceEnabled, disabled, variants, onActivate, onRemove }: ThemeCardProps) {
return (
<div className="relative">
<button
type="button"
onClick={onActivate}
disabled={disabled}
className={cn(
'relative flex flex-col items-center p-3 rounded-xl border-2 transition-all text-left w-full disabled:cursor-not-allowed disabled:opacity-60',
'flex flex-col items-center p-3 rounded-xl border-2 transition-all text-left w-full disabled:cursor-not-allowed disabled:opacity-60',
isActive
? 'border-primary bg-primary/5 ring-1 ring-primary/20'
: 'border-border hover:border-primary/40 bg-card',
@@ -221,17 +223,19 @@ function ThemeCard({ name, author, preview, isActive, isDefault, isForceEnabled,
</div>
)}
</div>
</button>
{/* Remove button */}
{onRemove && !isActive && (
<button
onClick={(e) => { e.stopPropagation(); onRemove(); }}
type="button"
onClick={onRemove}
className="absolute top-2 right-2 p-1 rounded-md hover:bg-destructive/10 text-muted-foreground hover:text-destructive transition-colors"
title="Remove theme"
>
<Trash2 className="w-3.5 h-3.5" />
</button>
)}
</button>
</div>
);
}