From a51efc1fbfa02d836f0cb01b85fd2ae9caec2c11 Mon Sep 17 00:00:00 2001
From: Jinwoo Hong <73622457+Jinwoo-H@users.noreply.github.com>
Date: Thu, 16 Apr 2026 02:45:58 -0400
Subject: [PATCH] fix: resolve invalid nested button DOM in worktree group
 headers (#706)

---
 .../src/components/sidebar/WorktreeList.tsx        | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/renderer/src/components/sidebar/WorktreeList.tsx b/src/renderer/src/components/sidebar/WorktreeList.tsx
index e4cf2a25293..c796d46dbca 100644
--- a/src/renderer/src/components/sidebar/WorktreeList.tsx
+++ b/src/renderer/src/components/sidebar/WorktreeList.tsx
@@ -287,12 +287,20 @@ const VirtualizedWorktreeViewport = React.memo(function VirtualizedWorktreeViewp
                 className="absolute left-0 right-0"
                 style={{ transform: `translateY(${vItem.start}px)` }}
               >
-                <button
+                <div
+                  role="button"
+                  tabIndex={0}
                   className={cn(
-                    'group mt-2 flex h-7 w-full items-center gap-1.5 px-1.5 text-left transition-all',
+                    'group mt-2 flex h-7 w-full items-center gap-1.5 px-1.5 text-left transition-all cursor-pointer',
                     row.repo ? 'overflow-hidden' : row.tone
                   )}
                   onClick={() => toggleGroup(row.key)}
+                  onKeyDown={(e) => {
+                    if (e.key === 'Enter' || e.key === ' ') {
+                      e.preventDefault()
+                      toggleGroup(row.key)
+                    }
+                  }}
                 >
                   {row.icon ? (
                     <div
@@ -354,7 +362,7 @@ const VirtualizedWorktreeViewport = React.memo(function VirtualizedWorktreeViewp
                       )}
                     />
                   </div>
-                </button>
+                </div>
               </div>
             )
           }