From 2926413ba2ca5cc937f239ea15864a86bec8bf08 Mon Sep 17 00:00:00 2001
From: Neil <4138956+nwparker@users.noreply.github.com>
Date: Sun, 12 Apr 2026 20:59:43 -0700
Subject: [PATCH] Refine sidebar worktree list spacing (#565)

---
 src/renderer/src/components/sidebar/WorktreeCard.tsx | 2 +-
 src/renderer/src/components/sidebar/WorktreeList.tsx | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/renderer/src/components/sidebar/WorktreeCard.tsx b/src/renderer/src/components/sidebar/WorktreeCard.tsx
index 725ffd19bb3..514bafbd713 100644
--- a/src/renderer/src/components/sidebar/WorktreeCard.tsx
+++ b/src/renderer/src/components/sidebar/WorktreeCard.tsx
@@ -236,7 +236,7 @@ const WorktreeCard = React.memo(function WorktreeCard({
     <WorktreeContextMenu worktree={worktree}>
       <div
         className={cn(
-          'group relative flex items-start gap-2.5 px-2 py-2 rounded-lg cursor-pointer transition-all duration-200 outline-none select-none mx-1',
+          'group relative flex items-start gap-2.5 px-2 py-2 rounded-lg cursor-pointer transition-all duration-200 outline-none select-none ml-1',
           isActive
             ? 'bg-black/[0.06] shadow-[0_1px_2px_rgba(0,0,0,0.03)] border border-border/60 dark:bg-white/[0.10] dark:border-border/40'
             : 'border border-transparent hover:bg-accent/40',
diff --git a/src/renderer/src/components/sidebar/WorktreeList.tsx b/src/renderer/src/components/sidebar/WorktreeList.tsx
index 91c2d287df2..4e38a3e1e4d 100644
--- a/src/renderer/src/components/sidebar/WorktreeList.tsx
+++ b/src/renderer/src/components/sidebar/WorktreeList.tsx
@@ -521,7 +521,12 @@ const WorktreeList = React.memo(function WorktreeList() {
       aria-orientation="vertical"
       aria-activedescendant={activeDescendantId}
       onKeyDown={handleContainerKeyDown}
-      className="flex-1 overflow-auto px-1 scrollbar-sleek scroll-smooth outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset pt-px"
+      // Why: `scrollbar-gutter: stable` keeps the overflow lane reserved so
+      // cards do not reflow when the list becomes scrollable. With that lane
+      // reserved, the right-side list padding is redundant, so keep only the
+      // left inset and let the scrollbar occupy the reclaimed edge space.
+      className="flex-1 overflow-auto pl-1 scrollbar-sleek scroll-smooth outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-inset pt-px"
+      style={{ scrollbarGutter: 'stable' }}
     >
       <div
         role="presentation"