From bf48547e1e4353fa0e3b0189d98ef2508ab4bbf2 Mon Sep 17 00:00:00 2001
From: Dimitrie Hoekstra <hi@dimitr.ie>
Date: Tue, 15 Sep 2026 11:46:42 +0200
Subject: [PATCH] ai: let the prompt block wrap instead of overflowing the card

The coding-agent tabs put a sentence into a block built for an address. The
stacked block sets white-space: nowrap on purpose, because a wrapped address is
harder to read than one you scroll, but nowrap sizes the block to its content:
measured on the preview it came out 1079px wide and pushed 90px past the right
edge of the card, with the end of the prompt cut off. The Claude tab's block, the
same component with an address in it, is 291px and sits well inside.

Adds an explicit wrap prop rather than guessing from the content's length, the
same reason the block does not guess whether a cap is per line or per block.
Only the two tabs carrying a prompt pass it.

word-break goes back to normal so words stay whole, overriding the base rule's
break-all; overflow-wrap lets the address break if it has to.
---
 nuxt/components/content/AgentSetupTabs.vue |  2 +-
 nuxt/components/content/FfCommand.vue      | 10 ++++++++--
 src/css/style.css                          | 15 +++++++++++++++
 3 files changed, 24 insertions(+), 3 deletions(-)

diff --git a/nuxt/components/content/AgentSetupTabs.vue b/nuxt/components/content/AgentSetupTabs.vue
index f28a383f12..df80dc2063 100644
--- a/nuxt/components/content/AgentSetupTabs.vue
+++ b/nuxt/components/content/AgentSetupTabs.vue
@@ -178,7 +178,7 @@ function selectClient (id: string) {
           <CtaSignUp variant="primary" :position="`${surface}-tab-expert`" class="w-full" />
         </div>
         <div v-else class="ff-agent-step__cta">
-          <FfCommand :command="client.step1Command || ENDPOINT" event="cta-copy-mcp-endpoint" :position="pos(client.id)" stacked host-swap />
+          <FfCommand :command="client.step1Command || ENDPOINT" event="cta-copy-mcp-endpoint" :position="pos(client.id)" stacked host-swap :wrap="Boolean(client.step1Command)" />
         </div>
       </div>
 
diff --git a/nuxt/components/content/FfCommand.vue b/nuxt/components/content/FfCommand.vue
index 18ba22b849..12e80b60a2 100644
--- a/nuxt/components/content/FfCommand.vue
+++ b/nuxt/components/content/FfCommand.vue
@@ -22,7 +22,13 @@ const props = withDefaults(defineProps<{
     // default: the docs say "substitute your own platform address" in prose, and a
     // self-hosted reader otherwise copies an address that is not theirs.
     hostSwap?: boolean
-}>(), { event: undefined, position: undefined, stacked: false, hostSwap: false })
+    // Lets the block wrap instead of holding one line. The stacked block keeps an
+    // address on a single line on purpose, because a wrapped address is harder to
+    // read than one you scroll. A sentence is the opposite: nowrap sizes the block
+    // to the whole sentence, which pushes it out of its column and past the edge of
+    // the card. Stated per use rather than guessed from the content's length.
+    wrap?: boolean
+}>(), { event: undefined, position: undefined, stacked: false, hostSwap: false, wrap: false })
 
 const capture = useCapture()
 const copied = ref(false)
@@ -162,7 +168,7 @@ onUnmounted(() => clearTimeout(resetTimer))
       </div>
     </div>
 
-    <div class="ff-command" :class="{ 'ff-command--stacked': stacked }">
+    <div class="ff-command" :class="{ 'ff-command--stacked': stacked, 'ff-command--wrap': wrap }">
       <code class="ff-command__text">{{ shownCommand }}</code>
       <!-- Stacked uses the site's own button classes rather than the chip styling,
            so it is the same object as the CTAs it sits beside. -->
diff --git a/src/css/style.css b/src/css/style.css
index 08c42f18c6..f7578779b4 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -522,6 +522,21 @@ dl.message-properties > dd {
     @apply rounded-lg p-4;
 }
 
+/* A sentence, not an address. The stacked block holds one line on purpose, which is
+   right for something you read left to right and paste. For a prompt it is wrong
+   twice over: nowrap sizes the block to the whole sentence, so it pushes out of its
+   column and past the card's edge, and the half you cannot see is the half that
+   tells you what the prompt does.
+
+   word-break goes back to normal, overriding the base rule's break-all, so words
+   stay whole; overflow-wrap lets the address break if it has to. */
+.ff-command--stacked.ff-command--wrap .ff-command__text {
+    white-space: pre-wrap;
+    overflow-x: visible;
+    word-break: normal;
+    overflow-wrap: anywhere;
+}
+
 /* Self-hosted address control. Under the block, not inside it: the block is what you
    copy, and this changes what that is. Closed by default as a single line of link
    text, because most readers are on Cloud and the address is already right for them. */