From fbe4bdfdb78f9b11222403e7b4daf231538fcdb8 Mon Sep 17 00:00:00 2001
From: Jinwoo Hong <73622457+Jinwoo-H@users.noreply.github.com>
Date: Thu, 23 Apr 2026 13:16:01 -0400
Subject: [PATCH] fix(settings): replace nested button with div[role=button] in
 BrowserProfileRow (#995)

---
 .../components/settings/BrowserProfileRow.tsx  | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

diff --git a/src/renderer/src/components/settings/BrowserProfileRow.tsx b/src/renderer/src/components/settings/BrowserProfileRow.tsx
index a172c1fde71..3cc648fe244 100644
--- a/src/renderer/src/components/settings/BrowserProfileRow.tsx
+++ b/src/renderer/src/components/settings/BrowserProfileRow.tsx
@@ -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>
   )
 }