From f2b869ecdc4444c14dc52c65937e6fb4c4431689 Mon Sep 17 00:00:00 2001
From: Dotta <bippadotta@protonmail.com>
Date: Tue, 9 Jun 2026 15:09:44 +0000
Subject: [PATCH] Improve file viewer browsing layout

Co-Authored-By: Paperclip <noreply@paperclip.ing>
---
 ui/src/components/ArtifactFileChip.tsx        |  2 +-
 ui/src/components/FileViewerSheet.test.tsx    | 15 ++++
 ui/src/components/FileViewerSheet.tsx         | 70 ++++++++++++-------
 ui/src/components/MarkdownBody.test.tsx       |  2 +
 .../components/WorkspaceFileBrowser.test.tsx  |  6 ++
 ui/src/components/WorkspaceFileBrowser.tsx    |  4 +-
 ui/src/components/WorkspaceFileLink.tsx       |  2 +-
 7 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/ui/src/components/ArtifactFileChip.tsx b/ui/src/components/ArtifactFileChip.tsx
index a351c312568..49f2987c7c1 100644
--- a/ui/src/components/ArtifactFileChip.tsx
+++ b/ui/src/components/ArtifactFileChip.tsx
@@ -50,7 +50,7 @@ export function ArtifactFileChip({
   const content = (
     <>
       {showIcon ? <FileCode2 aria-hidden="true" className="h-3 w-3 shrink-0 opacity-70" /> : null}
-      <span className="truncate max-w-[38ch]">{display}</span>
+      <span className="max-w-full whitespace-normal break-all text-left">{display}</span>
     </>
   );
 
diff --git a/ui/src/components/FileViewerSheet.test.tsx b/ui/src/components/FileViewerSheet.test.tsx
index f648b748271..6d5859598db 100644
--- a/ui/src/components/FileViewerSheet.test.tsx
+++ b/ui/src/components/FileViewerSheet.test.tsx
@@ -75,6 +75,21 @@ describe("FileContentViewer", () => {
     expect(markup).toContain("break-words");
   });
 
+  it("reserves code gutter space for at least four digit line numbers", () => {
+    const markup = renderToStaticMarkup(
+      <FileContentViewer
+        content={content({
+          content: {
+            encoding: "utf8",
+            data: "one\ntwo\nthree",
+          },
+        })}
+        highlightedLine={null}
+      />,
+    );
+    expect(markup).toContain("calc(4ch + 2rem)");
+  });
+
   it("renders video previews with native controls", () => {
     const markup = renderToStaticMarkup(
       <FileContentViewer
diff --git a/ui/src/components/FileViewerSheet.tsx b/ui/src/components/FileViewerSheet.tsx
index 6035801dddc..b7a2c9387c8 100644
--- a/ui/src/components/FileViewerSheet.tsx
+++ b/ui/src/components/FileViewerSheet.tsx
@@ -94,6 +94,11 @@ function basename(path: string): string {
   return idx < 0 ? path : path.slice(idx + 1);
 }
 
+function dirname(path: string): string | null {
+  const idx = path.lastIndexOf("/");
+  return idx < 0 ? null : path.slice(0, idx);
+}
+
 function middleTruncatePath(path: string, maxLen = 80): string {
   if (path.length <= maxLen) return path;
   const head = path.slice(0, Math.floor(maxLen / 2) - 1);
@@ -267,7 +272,7 @@ export function FileContentViewer({ content, highlightedLine, onLoaded }: FileCo
     );
   }
 
-  const gutterWidth = `${Math.max(2, String(lines.length).length)}ch`;
+  const gutterWidth = `calc(${Math.max(4, String(lines.length).length)}ch + 2rem)`;
 
   return (
     <div
@@ -299,7 +304,7 @@ export function FileContentViewer({ content, highlightedLine, onLoaded }: FileCo
                   isHighlighted &&
                     "opacity-100 bg-[var(--paperclip-code-highlight-bg,rgba(250,204,21,0.12))] border-l-2 border-[var(--paperclip-code-highlight-border,rgb(234,179,8))]",
                 )}
-                style={{ width: gutterWidth }}
+                style={{ width: gutterWidth, minWidth: gutterWidth }}
               >
                 {lineNumber}
               </span>
@@ -626,28 +631,45 @@ export function FileViewerSheet({
             {announcement}
           </div>
           {state ? (
-            <FileViewerBody
-              resolveQuery={resolveQuery}
-              contentQuery={contentQuery}
-              elapsedMs={elapsedMs}
-              canPreview={canPreview}
-              highlightedLine={state.line ?? null}
-              onRetry={handleRetry}
-              onSetAnnouncement={setAnnouncement}
-              onFallbackToProject={
-                state.workspace !== "project" && !state.projectId && !state.workspaceId
-                  ? () =>
-                      viewer.open({
-                        path: state.path,
-                        line: state.line,
-                        column: state.column,
-                        workspace: "project",
-                        projectId: null,
-                        workspaceId: null,
-                      })
-                  : null
-              }
-            />
+            <div className="flex min-h-0 flex-1">
+              <aside className="hidden min-h-0 w-80 shrink-0 border-r border-border bg-muted/20 sm:flex">
+                <WorkspaceFileBrowser
+                  key={`${state.projectId ?? ""}:${state.workspaceId ?? ""}:${dirname(state.path) ?? ""}`}
+                  issueId={issueId}
+                  companyId={companyId}
+                  onOpen={handleBrowseOpen}
+                  initialFolderPath={dirname(state.path)}
+                  initialProjectId={state.projectId}
+                  initialWorkspaceId={state.workspaceId}
+                  autoFocusSearch={false}
+                  className="min-h-0 flex-1 p-3"
+                />
+              </aside>
+              <div className="flex min-w-0 flex-1 flex-col">
+                <FileViewerBody
+                  resolveQuery={resolveQuery}
+                  contentQuery={contentQuery}
+                  elapsedMs={elapsedMs}
+                  canPreview={canPreview}
+                  highlightedLine={state.line ?? null}
+                  onRetry={handleRetry}
+                  onSetAnnouncement={setAnnouncement}
+                  onFallbackToProject={
+                    state.workspace !== "project" && !state.projectId && !state.workspaceId
+                      ? () =>
+                          viewer.open({
+                            path: state.path,
+                            line: state.line,
+                            column: state.column,
+                            workspace: "project",
+                            projectId: null,
+                            workspaceId: null,
+                          })
+                      : null
+                  }
+                />
+              </div>
+            </div>
           ) : browseMode ? (
             <WorkspaceFileBrowser
               issueId={issueId}
diff --git a/ui/src/components/MarkdownBody.test.tsx b/ui/src/components/MarkdownBody.test.tsx
index 189afbfd6d2..7167506f36f 100644
--- a/ui/src/components/MarkdownBody.test.tsx
+++ b/ui/src/components/MarkdownBody.test.tsx
@@ -282,6 +282,8 @@ describe("MarkdownBody", () => {
 
     expect(html).toContain('data-workspace-file-link="true"');
     expect(html).toContain('data-workspace-file-path="videos/90-days-paperclip/out/90-days-paperclip-1x1.mp4"');
+    expect(html).toContain("videos/90-days-paperclip/out/90-days-paperclip-1x1.mp4");
+    expect(html).not.toContain("max-w-[38ch]");
     expect(html).not.toContain("paperclip-markdown-issue-ref");
     expect(html).not.toContain('href="/issues/PAP-10306"');
   });
diff --git a/ui/src/components/WorkspaceFileBrowser.test.tsx b/ui/src/components/WorkspaceFileBrowser.test.tsx
index d70b68f7244..fe9380db403 100644
--- a/ui/src/components/WorkspaceFileBrowser.test.tsx
+++ b/ui/src/components/WorkspaceFileBrowser.test.tsx
@@ -198,6 +198,12 @@ describe("WorkspaceFileBrowser", () => {
     expect(onOpen).toHaveBeenCalledWith({ path: "ui/src/pages/IssueDetail.tsx", workspace: "auto" });
   });
 
+  it("can render without autofocus when embedded beside a preview", () => {
+    useQueryMock.mockReturnValue(ok(availableResponse([createItem()])));
+    renderBrowser(vi.fn(), { autoFocusSearch: false });
+    expect(container.querySelector("input")?.hasAttribute("autofocus")).toBe(false);
+  });
+
   it("does not render a Recent/All toggle", () => {
     useQueryMock.mockReturnValue(ok(availableResponse([createItem()])));
     renderBrowser();
diff --git a/ui/src/components/WorkspaceFileBrowser.tsx b/ui/src/components/WorkspaceFileBrowser.tsx
index 4c20957410e..96bdbaa901e 100644
--- a/ui/src/components/WorkspaceFileBrowser.tsx
+++ b/ui/src/components/WorkspaceFileBrowser.tsx
@@ -219,6 +219,7 @@ export interface WorkspaceFileBrowserProps {
   initialFolderPath?: string | null;
   initialProjectId?: string | null;
   initialWorkspaceId?: string | null;
+  autoFocusSearch?: boolean;
   className?: string;
 }
 
@@ -230,6 +231,7 @@ export function WorkspaceFileBrowser({
   initialFolderPath,
   initialProjectId,
   initialWorkspaceId,
+  autoFocusSearch = true,
   className,
 }: WorkspaceFileBrowserProps) {
   const [source, setSource] = useState<BrowserSource>(
@@ -512,7 +514,7 @@ export function WorkspaceFileBrowser({
           aria-expanded={items.length > 0}
           aria-controls={items.length > 0 ? listboxId : undefined}
           aria-activedescendant={activeOptionId}
-          autoFocus
+          autoFocus={autoFocusSearch}
           autoComplete="off"
           spellCheck={false}
           className="h-8 pl-8 font-mono text-xs"
diff --git a/ui/src/components/WorkspaceFileLink.tsx b/ui/src/components/WorkspaceFileLink.tsx
index fe01f658a4b..0075a55973c 100644
--- a/ui/src/components/WorkspaceFileLink.tsx
+++ b/ui/src/components/WorkspaceFileLink.tsx
@@ -93,7 +93,7 @@ export function WorkspaceFileLink({
           ? <FolderOpen aria-hidden="true" className="h-3 w-3 shrink-0 opacity-70" />
           : <FileCode2 aria-hidden="true" className="h-3 w-3 shrink-0 opacity-70" />
       ) : null}
-      <span className="truncate max-w-[38ch]">{display}</span>
+      <span className="max-w-full whitespace-normal break-all text-left">{display}</span>
     </a>
   );
 }