diff --git a/apps/web/src/components/chat/ChangedFilesTree.test.tsx b/apps/web/src/components/chat/ChangedFilesTree.test.tsx
index e9fa1895bf99f4ad85107ab32c347948642deafd..accc6e0872ef4e4bafd9f6d4485f32fceb77df17 100644
--- a/apps/web/src/components/chat/ChangedFilesTree.test.tsx
+++ b/apps/web/src/components/chat/ChangedFilesTree.test.tsx
@@ -23,14 +23,14 @@ describe("ChangedFilesCard", () => {
     expect(markup).toContain('data-changed-files-state="expanded"');
     expect(markup).toContain('aria-expanded="true"');
     expect(markup).toContain("whitespace-nowrap");
-    expect(markup).toContain(
-      'class="group flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden',
-    );
+    expect(markup).toContain('class="group flex min-w-0 flex-1 items-center rounded-xl');
+    expect(markup).not.toMatch(/class="group flex min-w-0 flex-1 items-center[^"]*overflow-hidden/);
+    expect(markup).toContain('class="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden"');
     expect(markup).toContain('class="flex shrink-0 items-center gap-1 whitespace-nowrap');
     expect(markup).toContain('class="ml-1 hidden min-w-0 flex-1 truncate');
     expect(markup).toContain("@[24rem]/changed-files:inline");
     expect(markup).not.toContain("sm:inline");
-    expect(markup).toContain('class="flex shrink-0 items-center gap-1.5"');
+    expect(markup).toContain('class="flex shrink-0 items-center gap-1.5 pr-1"');
     expect(markup).toContain("!size-[22px]");
     expect(markup).toContain("size-3");
     expect(markup).toContain('aria-label="Collapse all folders"');
diff --git a/apps/web/src/components/chat/ChangedFilesTree.tsx b/apps/web/src/components/chat/ChangedFilesTree.tsx
index d29d8b7f2f44d2f0ceac0c113f9355b76d1a9fba..7ff9d1d2437236755a4490e65682123119ac6ce3 100644
--- a/apps/web/src/components/chat/ChangedFilesTree.tsx
+++ b/apps/web/src/components/chat/ChangedFilesTree.tsx
@@ -64,7 +64,7 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
       <div
         data-changed-files-header=""
         className={cn(
-          "flex items-center justify-between gap-2 rounded-xl px-1",
+          "flex items-center justify-between gap-2 rounded-xl",
           expanded &&
             "sticky top-2 z-10 mb-2 bg-secondary dark:bg-[color-mix(in_srgb,var(--foreground)_2.5%,var(--background))]",
         )}
@@ -73,34 +73,36 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
           type="button"
           aria-expanded={expanded}
           data-scroll-anchor-ignore
-          className="group flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden rounded-lg px-1 py-1.5 text-left transition-colors hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+          className="group flex min-w-0 flex-1 items-center rounded-xl px-2 py-1.5 text-left transition-colors hover:bg-accent/60 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
           onClick={() => onExpandedChange(!expanded)}
         >
-          <ChevronRightIcon
-            aria-hidden="true"
-            className={cn(
-              "size-3.5 shrink-0 text-muted-foreground transition-transform",
-              expanded && "rotate-90",
-            )}
-          />
-          <span className="flex shrink-0 items-center gap-1 whitespace-nowrap font-medium text-foreground text-xs leading-4">
-            <span>
-              {files.length} changed file{files.length === 1 ? "" : "s"}
+          <span className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
+            <ChevronRightIcon
+              aria-hidden="true"
+              className={cn(
+                "size-3.5 shrink-0 text-muted-foreground transition-transform",
+                expanded && "rotate-90",
+              )}
+            />
+            <span className="flex shrink-0 items-center gap-1 whitespace-nowrap font-medium text-foreground text-xs leading-4">
+              <span>
+                {files.length} changed file{files.length === 1 ? "" : "s"}
+              </span>
+              {hasNonZeroStat(summaryStat) && (
+                <DiffStatLabel
+                  additions={summaryStat.additions}
+                  className="text-xs leading-4"
+                  deletions={summaryStat.deletions}
+                  layout="inline"
+                />
+              )}
+            </span>
+            <span className="ml-1 hidden min-w-0 flex-1 truncate text-[11px] text-muted-foreground group-hover:text-foreground/80 @[24rem]/changed-files:inline">
+              {expanded ? "Hide files" : "Show files"}
             </span>
-            {hasNonZeroStat(summaryStat) && (
-              <DiffStatLabel
-                additions={summaryStat.additions}
-                className="text-xs leading-4"
-                deletions={summaryStat.deletions}
-                layout="inline"
-              />
-            )}
-          </span>
-          <span className="ml-1 hidden min-w-0 flex-1 truncate text-[11px] text-muted-foreground group-hover:text-foreground/80 @[24rem]/changed-files:inline">
-            {expanded ? "Hide files" : "Show files"}
           </span>
         </button>
-        <div className="flex shrink-0 items-center gap-1.5">
+        <div className="flex shrink-0 items-center gap-1.5 pr-1">
           {expanded ? (
             <Tooltip>
               <TooltipTrigger