From 6122cd0b5502aeb53e145c4fbb9fea6263c18a19 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Padez?= <andre.padez@gmail.com>
Date: Tue, 25 Aug 2026 18:09:00 +0000
Subject: [PATCH] the chat panel needs the flex column its child assumes

EmbeddableChat is handed flex-1 min-h-0, which needs a flex column with a real
height above it. shipped without one, so the composer floated mid-panel and the
transcript ran below the fold. ChatPanelWrapper has the same div and I copied
the child without it.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Officer-Session: 656f5c85-e49a-4f1f-b9f3-042a04b4d043
---
 web/ChatPanel.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/web/ChatPanel.tsx b/web/ChatPanel.tsx
index f5cf61c..89cec79 100644
--- a/web/ChatPanel.tsx
+++ b/web/ChatPanel.tsx
@@ -33,6 +33,14 @@ const PREFIX = [
   'expires are about THIS machine — read the Proxy Manager skill before answering one.',
 ].join(' ');
 
+/**
+ * The wrapper is not decoration. `EmbeddableChat` is handed `flex-1 min-h-0`, which needs a flex COLUMN
+ * with a real height above it — without one the composer floats mid-panel and the transcript overflows
+ * below the fold, which is exactly what shipping it bare produced. `ChatPanelWrapper` has the same div for
+ * the same reason.
+ */
 export const ChatPanel = ({ panelId }: { panelId: string }) => (
-  <EmbeddableChat className="min-h-0 flex-1" panelId={panelId} promptPrefix={PREFIX} />
+  <div className="flex h-full min-h-0 flex-col">
+    <EmbeddableChat className="min-h-0 flex-1" panelId={panelId} promptPrefix={PREFIX} />
+  </div>
 );