Let the prompt block wrap instead of overflowing the card

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>
 

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. -->

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. */