authorgravatar for mrmg@deflexion.netMark Griffin <mrmg@deflexion.net> 2026-08-15 13:26:10+01:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-15 12:26:10+00:00
logd550b829bd169fa8973b17df940ef2fbf2e69f37
tree576fa8914505a8a39203af05da7e38d88c52d9f8
parent1a5ff424cee104e1e8bbcf9bbf5414bbad843be3
signature Signed by PGP key B5690EEEBB952194

fix(web): stop clipping the changed-files expand hover on Windows (#6545)

Co-authored-by: Cursor <cursoragent@cursor.com>

2 files changed, 30 insertions(+), 28 deletions(-)

apps/web/src/components/chat/ChangedFilesTree.test.tsx+4-4
...@@ -23,14 +23,14 @@ describe("ChangedFilesCard", () => {...@@ -23,14 +23,14 @@ describe("ChangedFilesCard", () => {
23 expect(markup).toContain('data-changed-files-state="expanded"');23 expect(markup).toContain('data-changed-files-state="expanded"');
24 expect(markup).toContain('aria-expanded="true"');24 expect(markup).toContain('aria-expanded="true"');
25 expect(markup).toContain("whitespace-nowrap");25 expect(markup).toContain("whitespace-nowrap");
26 expect(markup).toContain(26 expect(markup).toContain('class="group flex min-w-0 flex-1 items-center rounded-xl');
27 'class="group flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden',27 expect(markup).not.toMatch(/class="group flex min-w-0 flex-1 items-center[^"]*overflow-hidden/);
28 );28 expect(markup).toContain('class="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden"');
29 expect(markup).toContain('class="flex shrink-0 items-center gap-1 whitespace-nowrap');29 expect(markup).toContain('class="flex shrink-0 items-center gap-1 whitespace-nowrap');
30 expect(markup).toContain('class="ml-1 hidden min-w-0 flex-1 truncate');30 expect(markup).toContain('class="ml-1 hidden min-w-0 flex-1 truncate');
31 expect(markup).toContain("@[24rem]/changed-files:inline");31 expect(markup).toContain("@[24rem]/changed-files:inline");
32 expect(markup).not.toContain("sm:inline");32 expect(markup).not.toContain("sm:inline");
33 expect(markup).toContain('class="flex shrink-0 items-center gap-1.5"');33 expect(markup).toContain('class="flex shrink-0 items-center gap-1.5 pr-1"');
34 expect(markup).toContain("!size-[22px]");34 expect(markup).toContain("!size-[22px]");
35 expect(markup).toContain("size-3");35 expect(markup).toContain("size-3");
36 expect(markup).toContain('aria-label="Collapse all folders"');36 expect(markup).toContain('aria-label="Collapse all folders"');
apps/web/src/components/chat/ChangedFilesTree.tsx+26-24
...@@ -64,7 +64,7 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {...@@ -64,7 +64,7 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
64 <div64 <div
65 data-changed-files-header=""65 data-changed-files-header=""
66 className={cn(66 className={cn(
67 "flex items-center justify-between gap-2 rounded-xl px-1",67 "flex items-center justify-between gap-2 rounded-xl",
68 expanded &&68 expanded &&
69 "sticky top-2 z-10 mb-2 bg-secondary dark:bg-[color-mix(in_srgb,var(--foreground)_2.5%,var(--background))]",69 "sticky top-2 z-10 mb-2 bg-secondary dark:bg-[color-mix(in_srgb,var(--foreground)_2.5%,var(--background))]",
70 )}70 )}
...@@ -73,34 +73,36 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {...@@ -73,34 +73,36 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
73 type="button"73 type="button"
74 aria-expanded={expanded}74 aria-expanded={expanded}
75 data-scroll-anchor-ignore75 data-scroll-anchor-ignore
76 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"76 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"
77 onClick={() => onExpandedChange(!expanded)}77 onClick={() => onExpandedChange(!expanded)}
78 >78 >
79 <ChevronRightIcon79 <span className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
80 aria-hidden="true"80 <ChevronRightIcon
81 className={cn(81 aria-hidden="true"
82 "size-3.5 shrink-0 text-muted-foreground transition-transform",82 className={cn(
83 expanded && "rotate-90",83 "size-3.5 shrink-0 text-muted-foreground transition-transform",
84 )}84 expanded && "rotate-90",
85 />85 )}
86 <span className="flex shrink-0 items-center gap-1 whitespace-nowrap font-medium text-foreground text-xs leading-4">86 />
87 <span>87 <span className="flex shrink-0 items-center gap-1 whitespace-nowrap font-medium text-foreground text-xs leading-4">
88 {files.length} changed file{files.length === 1 ? "" : "s"}88 <span>
89 {files.length} changed file{files.length === 1 ? "" : "s"}
90 </span>
91 {hasNonZeroStat(summaryStat) && (
92 <DiffStatLabel
93 additions={summaryStat.additions}
94 className="text-xs leading-4"
95 deletions={summaryStat.deletions}
96 layout="inline"
97 />
98 )}
99 </span>
100 <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">
101 {expanded ? "Hide files" : "Show files"}
89 </span>102 </span>
90 {hasNonZeroStat(summaryStat) && (
91 <DiffStatLabel
92 additions={summaryStat.additions}
93 className="text-xs leading-4"
94 deletions={summaryStat.deletions}
95 layout="inline"
96 />
97 )}
98 </span>
99 <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">
100 {expanded ? "Hide files" : "Show files"}
101 </span>103 </span>
102 </button>104 </button>
103 <div className="flex shrink-0 items-center gap-1.5">105 <div className="flex shrink-0 items-center gap-1.5 pr-1">
104 {expanded ? (106 {expanded ? (
105 <Tooltip>107 <Tooltip>
106 <TooltipTrigger108 <TooltipTrigger