From 0df6661fc5f8a2c87f4cf2b7a724ae34be8928ef Mon Sep 17 00:00:00 2001
From: Rob Colbert <rob@digitaltelepresence.com>
Date: Sun, 10 May 2026 10:49:16 -0400
Subject: [PATCH] chat interface fixes and cleanup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Chat View area of the view was growing in width (unbounded), and has
been fixed. From the agent:

> The root cause was a flexbox sizing rule: in ChatSessionView.tsx:768
the parent row flex-1 flex bg-bg-primary overflow-hidden relative has
two children — the content area and the sidebar. The content area (line
777) was flex-1 flex flex-col relative, which as a flex child defaults
to min-width: auto. This means its intrinsic content width (driven by
the wide <pre>) is used as a minimum, forcing the flex item to expand
the whole row beyond the viewport.
>
> Adding min-w-0 overrides min-width: auto to min-width: 0, letting the
flex item shrink below its content's natural width. Now the
overflow-x-auto on the markdown wrapper actually has somewhere to scroll
into.
---
 .../frontend/src/components/ChatTurn.tsx      |  12 +-
 gadget-code/frontend/src/index.css            | 161 ++++++++++++++++++
 .../frontend/src/pages/ChatSessionView.tsx    |   2 +-
 3 files changed, 168 insertions(+), 7 deletions(-)

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" />
         )}