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>
 );