fix(settings): replace nested button with div[role=button] in BrowserProfileRow (#995)

This commit is contained in:
Jinwoo Hong
2026-04-23 10:16:01 -07:00
committed by GitHub
parent 3b8b3a8bb8
commit fbe4bdfdb7
@@ -79,11 +79,21 @@ export function BrowserProfileRow({
? `${BROWSER_FAMILY_LABELS[profile.source.browserFamily] ?? profile.source.browserFamily}${profile.source.profileName ? ` (${profile.source.profileName})` : ''}`
: null
// Why: uses div[role=button] instead of <button> to avoid nested <button>
// elements — the dropdown trigger and trash actions inside also render as
// <button>, which is invalid HTML and causes React hydration warnings.
return (
<button
type="button"
<div
role="button"
tabIndex={0}
onClick={onSelect}
className={`flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-left transition-colors ${
onKeyDown={(e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault()
onSelect()
}
}}
className={`flex w-full items-center gap-3 rounded-md border px-3 py-2.5 text-left transition-colors cursor-pointer ${
isActive
? 'border-foreground/20 bg-accent/15'
: 'border-border/70 hover:border-border hover:bg-accent/8'
@@ -187,6 +197,6 @@ export function BrowserProfileRow({
</Button>
)}
</div>
</button>
</div>
)
}