fix: resolve invalid nested button DOM in worktree group headers

The group header row in the sidebar's worktree list was a <button>
containing an inner <Button> for the "Create worktree" action. HTML
does not allow <button> inside <button>, causing React hydration
warnings. Replace the outer <button> with a <div role="button"> to
preserve accessibility while fixing the DOM nesting violation.
This commit is contained in:
Jinwoo-H 2026-04-16 02:36:18 -04:00
parent e17d917afe
commit f73ba9329e

View file

@ -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>
)
}