From 6505493735dc2fc935b4f18916732f220b9d451d Mon Sep 17 00:00:00 2001
From: David Kaya <david@kaya.sk>
Date: Sat, 28 Mar 2026 19:33:41 +0100
Subject: [PATCH] fix: resolve nested button DOM nesting in approval pill

Change the approval group header from <button> to a <div> with
role='button' and keyboard handling to avoid nesting the GroupToggle
<button> inside another <button>, which is invalid HTML.

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
---
 src/renderer/components/chat/InlinePills.tsx | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/chat/InlinePills.tsx b/src/renderer/components/chat/InlinePills.tsx
index 8553740..213d3f3 100644
--- a/src/renderer/components/chat/InlinePills.tsx
+++ b/src/renderer/components/chat/InlinePills.tsx
@@ -540,10 +540,12 @@ export function InlineApprovalPill({
                       {group.label}
                     </div>
                   ) : (
-                    <button
-                      className={`flex w-full items-center gap-1.5 px-2.5 py-1.5 text-left transition hover:bg-zinc-800/60 ${groupIdx > 0 ? 'mt-0.5' : ''}`}
+                    <div
+                      className={`flex w-full cursor-pointer items-center gap-1.5 px-2.5 py-1.5 text-left transition hover:bg-zinc-800/60 ${groupIdx > 0 ? 'mt-0.5' : ''}`}
                       onClick={() => toggleExpanded(group.id)}
-                      type="button"
+                      onKeyDown={(e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); toggleExpanded(group.id); } }}
+                      role="button"
+                      tabIndex={0}
                     >
                       {group.tools.length > 0 ? (
                         <ChevronRight className={`size-3 shrink-0 text-zinc-600 transition ${expanded ? 'rotate-90' : ''}`} />
@@ -559,7 +561,7 @@ export function InlineApprovalPill({
                         someApproved={someApproved}
                         onToggle={(e) => { e.stopPropagation(); toggleGroup(group); }}
                       />
-                    </button>
+                    </div>
                   )}
 
                   {/* Group tools */}