authorgravatar for 269035359+t3-code[bot]@users.noreply.github.comt3-code[bot] <269035359+t3-code[bot]@users.noreply.github.com> 2026-08-12 08:56:13-04:00
committergravatar for noreply@github.comGitHub <noreply@github.com> 2026-08-12 08:56:13-04:00
loge321667b100a18d5306f845c655dce6f20525776
treeaf99a29cefac494705c571f4540ae884f1d37860
parent849bac8946c40420174b4187e36fcf17b5ea7cc4
signature Signed by PGP key B5690EEEBB952194

fix(web): prevent changed files header overlap (#6314)

Co-authored-by: t3-code[bot] <269035359+t3-code[bot]@users.noreply.github.com> Co-authored-by: Wout Stiens <71498452+StiensWout@users.noreply.github.com>

2 files changed, 14 insertions(+), 6 deletions(-)

apps/web/src/components/chat/ChangedFilesTree.test.tsx+8
......@@ -23,6 +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 );
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');
31 expect(markup).toContain("@[24rem]/changed-files:inline");
32 expect(markup).not.toContain("sm:inline");
33 expect(markup).toContain('class="flex shrink-0 items-center gap-1.5"');
2634 expect(markup).toContain("!size-[22px]");
2735 expect(markup).toContain("size-3");
2836 expect(markup).toContain('aria-label="Collapse all folders"');
apps/web/src/components/chat/ChangedFilesTree.tsx+6-6
......@@ -56,7 +56,7 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
5656
5757 return (
5858 <div
59 className="mt-4 rounded-2xl border border-border/70 bg-secondary p-2 dark:border-transparent dark:bg-input/32"
59 className="@container/changed-files mt-4 rounded-2xl border border-border/70 bg-secondary p-2 dark:border-transparent dark:bg-input/32"
6060 data-changed-files-state={
6161 expanded ? "expanded" : compactPreviewVisible ? "preview" : "collapsed"
6262 }
......@@ -73,7 +73,7 @@ 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 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 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"
7777 onClick={() => onExpandedChange(!expanded)}
7878 >
7979 <ChevronRightIcon
......@@ -83,7 +83,7 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
8383 expanded && "rotate-90",
8484 )}
8585 />
86 <span className="flex min-w-0 items-center gap-1 whitespace-nowrap font-medium text-foreground text-xs leading-4">
86 <span className="flex shrink-0 items-center gap-1 whitespace-nowrap font-medium text-foreground text-xs leading-4">
8787 <span>
8888 {files.length} changed file{files.length === 1 ? "" : "s"}
8989 </span>
......@@ -96,11 +96,11 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
9696 />
9797 )}
9898 </span>
99 <span className="ml-1 hidden truncate text-[11px] text-muted-foreground group-hover:text-foreground/80 sm:inline">
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">
100100 {expanded ? "Hide files" : "Show files"}
101101 </span>
102102 </button>
103 <div className="flex items-center gap-1.5">
103 <div className="flex shrink-0 items-center gap-1.5">
104104 {expanded ? (
105105 <Tooltip>
106106 <TooltipTrigger
......@@ -142,7 +142,7 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
142142 }
143143 >
144144 <FileDiffIcon className="size-3" />
145 <span className="hidden sm:inline">Open diff</span>
145 <span className="hidden @[24rem]/changed-files:inline">Open diff</span>
146146 </TooltipTrigger>
147147 <TooltipPopup side="top">Open the full diff</TooltipPopup>
148148 </Tooltip>