diff --git a/frontend/DESIGN.md b/frontend/DESIGN.md
index d626d30d..9b62a9b3 100644
--- a/frontend/DESIGN.md
+++ b/frontend/DESIGN.md
@@ -317,6 +317,9 @@ with `className="flex-row items-start gap-2"` and the `CopyButton` inside.
 Inside an Alert or a trace's tool panel, and in a full-pane viewer, the
 `<pre>` takes the recipe with no Card, so boxes don't nest. Put scroll caps
 (`max-h-* overflow-y-auto`) on the Card; never `break-all`.
+This recipe is for app output. A fenced code block in a markdown answer is
+source code: it keeps its lines (`white-space: pre`, indentation intact) and
+scrolls sideways inside its own bordered frame (see Chat answer column).
 
 Tile text: the name is `CardTitle` (14px semibold from Card's `text-sm`; pass
 `as="h2"` on a page that goes from its title straight to a tile grid, but
@@ -765,6 +768,18 @@ New Chat is `SquarePen` everywhere: the phone bar, the sidebar's New Chat row
 and the collapsed rail. `Plus` means "add an item to this list", not "start
 a chat".
 
+### Chat answer column
+
+The answer column never scrolls sideways. Its boxes, from AnswerFlow down to
+MarkdownAnswer, are stretched full width (`w-full min-w-0`, or the flex
+default), never `items-start` / `self-start` with `max-w-full`: a
+shrink-to-fit box sizes to its longest code line, and `max-w-full` caps it at
+100% before its margins are added, so it still spills past a phone screen.
+Wide markdown blocks scroll inside their own frame, not the page: fenced code
+scrolls sideways in its bordered box with the language and copy row fixed
+above it, and tables do the same (`overflow-x-auto` on their bordered
+wrapper).
+
 ### Grids
 
 Two recipes, no component. Tiles (sources, tools, custom models, agents):
diff --git a/frontend/src/conversation/AnswerFlow.tsx b/frontend/src/conversation/AnswerFlow.tsx
index 6f8c79c0..03d76a81 100644
--- a/frontend/src/conversation/AnswerFlow.tsx
+++ b/frontend/src/conversation/AnswerFlow.tsx
@@ -126,10 +126,13 @@ export default function AnswerFlow({
         );
       })}
       {message && (
-        <div className="flex max-w-full flex-col flex-wrap items-start self-start lg:flex-nowrap">
+        <div className="flex w-full min-w-0 flex-col">
           {/* ``ml-6`` is the answer's text column: step labels sit at the same
-              offset, with their icons in the gutter to its left. */}
-          <div className="animate-in fade-in slide-in-from-bottom-1.5 my-2 mr-5 ml-6 flex max-w-full flex-col duration-260 ease-out motion-reduce:animate-none">
+              offset, with their icons in the gutter to its left. Stretched,
+              not ``self-start max-w-full``: a shrink-to-fit box sizes to its
+              longest code line, and ``max-w-full`` caps it at 100% before the
+              margins land on top, so the chat scrolled sideways on a phone. */}
+          <div className="animate-in fade-in slide-in-from-bottom-1.5 my-2 mr-5 ml-6 flex min-w-0 flex-col duration-260 ease-out motion-reduce:animate-none">
             <MarkdownAnswer
               content={message}
               isStreaming={isStreaming}