From 805f96ca703f9e13f746871d68c8f8f43ee22fcd Mon Sep 17 00:00:00 2001
From: Camiel van Schoonhoven <camiel.vanschoonhoven@shopify.com>
Date: Thu, 5 Nov 2026 16:56:15 -0700
Subject: [PATCH] fix(tangent): wrap the attach-agent command instead of
 scrolling it

The command sat in a fixed one-line box that scrolled sideways, so on
systems with always-visible scrollbars the scrollbar covered the text.
It now wraps, breaking inside long tokens so the dialog keeps its width.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
---
 .../Tangent/components/AttachAgentButton.tsx  |  2 +-
 .../v2/shared/components/CommandBlock.tsx     | 40 +++++++------------
 2 files changed, 16 insertions(+), 26 deletions(-)

diff --git a/src/routes/v2/pages/Tangent/components/AttachAgentButton.tsx b/src/routes/v2/pages/Tangent/components/AttachAgentButton.tsx
index e0c3fc057..131670021 100644
--- a/src/routes/v2/pages/Tangent/components/AttachAgentButton.tsx
+++ b/src/routes/v2/pages/Tangent/components/AttachAgentButton.tsx
@@ -96,7 +96,7 @@ function AttachAgentDialog({
               <Markdown body={commandInstructions} />
               <CommandBlock
                 command={target.command(baseUrl, sessionId)}
-                contained
+                wrap
                 trackingId="projects.attach_agent.copy_command"
                 trackingMetadata={{ agent: target.id }}
               />
diff --git a/src/routes/v2/shared/components/CommandBlock.tsx b/src/routes/v2/shared/components/CommandBlock.tsx
index 7716fbfd9..eb7ffd0f5 100644
--- a/src/routes/v2/shared/components/CommandBlock.tsx
+++ b/src/routes/v2/shared/components/CommandBlock.tsx
@@ -1,15 +1,16 @@
 import { InlineStack } from "@/components/ui/layout";
 import { Text } from "@/components/ui/typography";
+import { cn } from "@/lib/utils";
 import { CopyValueButton } from "@/routes/v2/shared/components/CopyValueButton";
 
 export function CommandBlock({
   command,
-  contained = false,
+  wrap = false,
   trackingId,
   trackingMetadata,
 }: {
   command: string;
-  contained?: boolean;
+  wrap?: boolean;
   trackingId?: string;
   trackingMetadata?: Record<string, unknown>;
 }) {
@@ -20,29 +21,18 @@ export function CommandBlock({
       wrap="nowrap"
       className="w-full min-w-0 rounded-md border border-border bg-muted px-3 py-2"
     >
-      {contained ? (
-        // Absolutely positioned so the long command never contributes to the
-        // intrinsic width of the dialog's nested grids, which would otherwise
-        // stretch the whole dialog wider than its box. The command then scrolls
-        // horizontally within the fixed-width container instead.
-        <div className="relative h-5 min-w-0 flex-1">
-          <Text
-            size="sm"
-            font="mono"
-            className="absolute inset-0 overflow-x-auto whitespace-pre leading-5"
-          >
-            {command}
-          </Text>
-        </div>
-      ) : (
-        <Text
-          size="sm"
-          font="mono"
-          className="min-w-0 flex-1 overflow-x-auto whitespace-pre"
-        >
-          {command}
-        </Text>
-      )}
+      <Text
+        size="sm"
+        font="mono"
+        className={cn(
+          "min-w-0 flex-1",
+          wrap
+            ? "whitespace-pre-wrap wrap-anywhere"
+            : "overflow-x-auto whitespace-pre",
+        )}
+      >
+        {command}
+      </Text>
       <CopyValueButton
         valueFn={() => command}
         trackingId={trackingId}