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", () => {
2323 expect(markup).toContain('data-changed-files-state="expanded"');
2424 expect(markup).toContain('aria-expanded="true"');
2525 expect(markup).toContain("whitespace-nowrap");
26 expect(markup).toContain(
27 'class="group flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden',
28 );
26 expect(markup).toContain('class="group flex min-w-0 flex-1 items-center rounded-xl');
27 expect(markup).not.toMatch(/class="group flex min-w-0 flex-1 items-center[^"]*overflow-hidden/);
28 expect(markup).toContain('class="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden"');
2929 expect(markup).toContain('class="flex shrink-0 items-center gap-1 whitespace-nowrap');
3030 expect(markup).toContain('class="ml-1 hidden min-w-0 flex-1 truncate');
3131 expect(markup).toContain("@[24rem]/changed-files:inline");
3232 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"');
3434 expect(markup).toContain("!size-[22px]");
3535 expect(markup).toContain("size-3");
3636 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: {
6464 <div
6565 data-changed-files-header=""
6666 className={cn(
67 "flex items-center justify-between gap-2 rounded-xl px-1",
67 "flex items-center justify-between gap-2 rounded-xl",
6868 expanded &&
6969 "sticky top-2 z-10 mb-2 bg-secondary dark:bg-[color-mix(in_srgb,var(--foreground)_2.5%,var(--background))]",
7070 )}
......@@ -73,34 +73,36 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
7373 type="button"
7474 aria-expanded={expanded}
7575 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"
7777 onClick={() => onExpandedChange(!expanded)}
7878 >
79 <ChevronRightIcon
80 aria-hidden="true"
81 className={cn(
82 "size-3.5 shrink-0 text-muted-foreground transition-transform",
83 expanded && "rotate-90",
84 )}
85 />
86 <span className="flex shrink-0 items-center gap-1 whitespace-nowrap font-medium text-foreground text-xs leading-4">
87 <span>
88 {files.length} changed file{files.length === 1 ? "" : "s"}
79 <span className="flex min-w-0 flex-1 items-center gap-1.5 overflow-hidden">
80 <ChevronRightIcon
81 aria-hidden="true"
82 className={cn(
83 "size-3.5 shrink-0 text-muted-foreground transition-transform",
84 expanded && "rotate-90",
85 )}
86 />
87 <span className="flex shrink-0 items-center gap-1 whitespace-nowrap font-medium text-foreground text-xs leading-4">
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"}
89102 </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"}
101103 </span>
102104 </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">
104106 {expanded ? (
105107 <Tooltip>
106108 <TooltipTrigger