diff --git a/gadget-code/frontend/src/components/ChatTurn.tsx b/gadget-code/frontend/src/components/ChatTurn.tsx
index f8fa732..f6e6cdf 100644
--- a/gadget-code/frontend/src/components/ChatTurn.tsx
+++ b/gadget-code/frontend/src/components/ChatTurn.tsx
@@ -110,8 +110,8 @@ const ChatTurn = memo(function ChatTurn({ turn, onUpdate }: ChatTurnProps) {
 
       {/* Agent Response */}
       {(turn.blocks && turn.blocks.length > 0) && (
-        <div className="max-w-[80%] ml-auto mb-4">
-          <div className="bg-bg-tertiary border border-border-default rounded p-4">
+        <div className="max-w-[80%] ml-auto mb-4 overflow-x-hidden">
+          <div className="bg-bg-tertiary border border-border-default rounded p-4 overflow-x-auto">
             <div className="text-sm font-semibold mb-3 text-text-secondary">
               Gadget
             </div>
@@ -134,11 +134,11 @@ const ChatTurn = memo(function ChatTurn({ turn, onUpdate }: ChatTurnProps) {
                 );
               } else if (block.mode === 'responding') {
                 return (
-                  <div key={idx} className="mb-3">
+                  <div key={idx} className="mb-3 overflow-x-auto">
                     <div
-                      className="text-text-primary"
-                      dangerouslySetInnerHTML={{ 
-                        __html: marked.parse(block.content) as string 
+                      className="gadget-markdown"
+                      dangerouslySetInnerHTML={{
+                        __html: marked.parse(block.content) as string
                       }}
                     />
                   </div>
diff --git a/gadget-code/frontend/src/index.css b/gadget-code/frontend/src/index.css
index bda31df..8651676 100644
--- a/gadget-code/frontend/src/index.css
+++ b/gadget-code/frontend/src/index.css
@@ -83,4 +83,165 @@ input, textarea {
 
 .strobe {
   animation: strobe 1.2s ease-in-out infinite;
+}
+
+/* ── Gadget Markdown Styles ─────────────────────────────────── */
+/* Applied to agent response output inside ChatTurn            */
+
+.gadget-markdown {
+  color: var(--color-text-primary);
+  line-height: 1.7;
+  font-size: 14px;
+  word-break: break-word;
+  /* Prevent the markdown root from stretching to fill the scroll container —
+     display:inline-block shrinks it to content width, so the
+     overflow-x-auto on the parent actually clips and scrolls it. */
+  display: inline-block;
+  width: 100%;
+  max-width: 100%;
+}
+
+.gadget-markdown h1,
+.gadget-markdown h2,
+.gadget-markdown h3,
+.gadget-markdown h4,
+.gadget-markdown h5,
+.gadget-markdown h6 {
+  color: #e8e8e8;
+  font-weight: 600;
+  line-height: 1.3;
+  margin-top: 1.5em;
+  margin-bottom: 0.5em;
+}
+
+.gadget-markdown h1 { font-size: 1.4em; border-bottom: 1px solid var(--color-border-default); padding-bottom: 0.3em; }
+.gadget-markdown h2 { font-size: 1.2em; border-bottom: 1px solid var(--color-border-default); padding-bottom: 0.25em; }
+.gadget-markdown h3 { font-size: 1.05em; }
+.gadget-markdown h4 { font-size: 1em; }
+
+.gadget-markdown p {
+  margin-top: 0;
+  margin-bottom: 0.85em;
+}
+
+.gadget-markdown a {
+  color: #60a5fa;
+  text-decoration: underline;
+}
+
+.gadget-markdown a:hover {
+  color: #93c5fd;
+}
+
+/* Inline code */
+.gadget-markdown code:not(pre code) {
+  font-family: var(--font-mono);
+  font-size: 0.875em;
+  background: #1e1e1e;
+  color: #f472b6;
+  padding: 0.15em 0.4em;
+  border-radius: 4px;
+  border: 1px solid #2d2d2d;
+}
+
+/* Code blocks */
+.gadget-markdown pre {
+  background: #0d0d0d;
+  border: 1px solid #2a2a2a;
+  border-radius: 6px;
+  padding: 1em 1.2em;
+  overflow-x: auto;
+  margin-bottom: 1em;
+  /* Horizontal scroll fix — parent must have overflow-x-auto or be constrained */
+  max-width: 100%;
+  width: 100%;
+}
+
+.gadget-markdown pre code {
+  font-family: var(--font-mono);
+  font-size: 0.85em;
+  color: #d4d4d4;
+  background: transparent;
+  padding: 0;
+  border: none;
+  border-radius: 0;
+}
+
+/* Tables */
+.gadget-markdown table {
+  width: auto;
+  max-width: 100%;
+  border-collapse: collapse;
+  margin-bottom: 1em;
+  font-size: 0.9em;
+}
+
+.gadget-markdown th,
+.gadget-markdown td {
+  border: 1px solid #2a2a2a;
+  padding: 0.5em 0.9em;
+  text-align: left;
+}
+
+.gadget-markdown th {
+  background: #1a1a1a;
+  color: #e8e8e8;
+  font-weight: 600;
+}
+
+.gadget-markdown tr:nth-child(even) td {
+  background: #111111;
+}
+
+.gadget-markdown tr:nth-child(odd) td {
+  background: #0d0d0d;
+}
+
+/* Blockquotes */
+.gadget-markdown blockquote {
+  border-left: 3px solid #3a3a3a;
+  margin: 0 0 1em 0;
+  padding: 0.5em 1em;
+  color: var(--color-text-muted);
+  background: #111111;
+  border-radius: 0 4px 4px 0;
+}
+
+/* Lists */
+.gadget-markdown ul,
+.gadget-markdown ol {
+  margin-bottom: 0.85em;
+  padding-left: 1.5em;
+}
+
+.gadget-markdown li {
+  margin-bottom: 0.3em;
+}
+
+.gadget-markdown li::marker {
+  color: var(--color-text-muted);
+}
+
+/* Horizontal rule */
+.gadget-markdown hr {
+  border: none;
+  border-top: 1px solid var(--color-border-default);
+  margin: 1.5em 0;
+}
+
+/* Images */
+.gadget-markdown img {
+  max-width: 100%;
+  border-radius: 6px;
+  border: 1px solid var(--color-border-default);
+}
+
+/* Strong / em */
+.gadget-markdown strong {
+  color: #e8e8e8;
+  font-weight: 600;
+}
+
+.gadget-markdown em {
+  color: #c4c4c4;
 }
\ No newline at end of file
diff --git a/gadget-code/frontend/src/pages/ChatSessionView.tsx b/gadget-code/frontend/src/pages/ChatSessionView.tsx
index 68e212c..7c0a3b6 100644
--- a/gadget-code/frontend/src/pages/ChatSessionView.tsx
+++ b/gadget-code/frontend/src/pages/ChatSessionView.tsx
@@ -774,7 +774,7 @@ export default function ChatSessionView() {
       )}
 
       {/* Content Area */}
-      <div className="flex-1 flex flex-col relative">
+      <div className="flex-1 flex flex-col relative min-w-0">
         {isEditingProvider && (
           <div className="absolute inset-0 bg-bg-primary/80 z-30" />
         )}