From 31ad3cdd0cfeaa3a7fdbab862b7e1ab353c5315c Mon Sep 17 00:00:00 2001 From: Danielle Maywood Date: Sat, 28 Feb 2026 10:33:06 +0000 Subject: [PATCH] fix(site): wrap long lines in agents diff panel (#22414) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The diff view on the `/agents` page had no way to handle lines wider than the panel. The `@pierre/diffs` library supports an `overflow` option — switching it from `"scroll"` (the shared default) to `"wrap"` for the side panel makes long lines wrap naturally instead of being clipped. Also adds a long import line to the Storybook sample diff so the wrapping behavior is easy to verify visually. --- site/src/pages/AgentsPage/FilesChangedPanel.stories.tsx | 3 ++- site/src/pages/AgentsPage/FilesChangedPanel.tsx | 1 + 2 files changed, 3 insertions(+), 1 deletion(-) diff --git a/site/src/pages/AgentsPage/FilesChangedPanel.stories.tsx b/site/src/pages/AgentsPage/FilesChangedPanel.stories.tsx index 02034eea61..7de1a0e397 100644 --- a/site/src/pages/AgentsPage/FilesChangedPanel.stories.tsx +++ b/site/src/pages/AgentsPage/FilesChangedPanel.stories.tsx @@ -9,10 +9,11 @@ const sampleUnifiedDiff = `diff --git a/site/src/pages/AgentsPage/FilesChangedPa index abc1234..def5678 100644 --- a/site/src/pages/AgentsPage/FilesChangedPanel.tsx +++ b/site/src/pages/AgentsPage/FilesChangedPanel.tsx -@@ -1,10 +1,14 @@ +@@ -1,10 +1,15 @@ +import { useTheme } from "@emotion/react"; import { parsePatchFiles } from "@pierre/diffs"; import { FileDiff } from "@pierre/diffs/react"; ++import { createContext, useCallback, useContext, useEffect, useLayoutEffect, useMemo, useReducer, useRef, useState, useSyncExternalStore } from "react"; // deliberately long import to verify horizontal overflow handling in narrow panels +import { + DIFFS_FONT_STYLE, + getDiffViewerOptions, diff --git a/site/src/pages/AgentsPage/FilesChangedPanel.tsx b/site/src/pages/AgentsPage/FilesChangedPanel.tsx index 645bdc6182..34bdb7d082 100644 --- a/site/src/pages/AgentsPage/FilesChangedPanel.tsx +++ b/site/src/pages/AgentsPage/FilesChangedPanel.tsx @@ -152,6 +152,7 @@ export const FilesChangedPanel: FC = ({ chatId }) => { fileDiff={fileDiff} options={{ ...diffOptions, + overflow: "wrap", enableLineSelection: true, enableHoverUtility: true, onLineSelected() {