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", () => {...@@ -23,6 +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(
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"');
26 expect(markup).toContain("!size-[22px]");34 expect(markup).toContain("!size-[22px]");
27 expect(markup).toContain("size-3");35 expect(markup).toContain("size-3");
28 expect(markup).toContain('aria-label="Collapse all folders"');36 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: {...@@ -56,7 +56,7 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
5656
57 return (57 return (
58 <div58 <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"
60 data-changed-files-state={60 data-changed-files-state={
61 expanded ? "expanded" : compactPreviewVisible ? "preview" : "collapsed"61 expanded ? "expanded" : compactPreviewVisible ? "preview" : "collapsed"
62 }62 }
...@@ -73,7 +73,7 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {...@@ -73,7 +73,7 @@ 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 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"
77 onClick={() => onExpandedChange(!expanded)}77 onClick={() => onExpandedChange(!expanded)}
78 >78 >
79 <ChevronRightIcon79 <ChevronRightIcon
...@@ -83,7 +83,7 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {...@@ -83,7 +83,7 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
83 expanded && "rotate-90",83 expanded && "rotate-90",
84 )}84 )}
85 />85 />
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">
87 <span>87 <span>
88 {files.length} changed file{files.length === 1 ? "" : "s"}88 {files.length} changed file{files.length === 1 ? "" : "s"}
89 </span>89 </span>
...@@ -96,11 +96,11 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {...@@ -96,11 +96,11 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
96 />96 />
97 )}97 )}
98 </span>98 </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">
100 {expanded ? "Hide files" : "Show files"}100 {expanded ? "Hide files" : "Show files"}
101 </span>101 </span>
102 </button>102 </button>
103 <div className="flex items-center gap-1.5">103 <div className="flex shrink-0 items-center gap-1.5">
104 {expanded ? (104 {expanded ? (
105 <Tooltip>105 <Tooltip>
106 <TooltipTrigger106 <TooltipTrigger
...@@ -142,7 +142,7 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {...@@ -142,7 +142,7 @@ export const ChangedFilesCard = memo(function ChangedFilesCard(props: {
142 }142 }
143 >143 >
144 <FileDiffIcon className="size-3" />144 <FileDiffIcon className="size-3" />
145 <span className="hidden sm:inline">Open diff</span>145 <span className="hidden @[24rem]/changed-files:inline">Open diff</span>
146 </TooltipTrigger>146 </TooltipTrigger>
147 <TooltipPopup side="top">Open the full diff</TooltipPopup>147 <TooltipPopup side="top">Open the full diff</TooltipPopup>
148 </Tooltip>148 </Tooltip>