From 4ff707bdcb357e8da9971ce2c78f69bcac5476da Mon Sep 17 00:00:00 2001
From: Nexus Dev <nexus@local>
Date: Sat, 11 Apr 2026 15:58:17 +0000
Subject: [PATCH] fix(nexus): use flex layout for assistant chat thread
 container
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 9 used `h-[calc(100vh-320px)] min-h-[320px]` on the thread
wrapper because `@tanstack/react-virtual` needs an explicit height
for its virtual scroll root. The calc was brittle — any change to
TopStrip or input bar sizing broke the math and let the thread
overflow or collapse below 320px.

Phase 16a replaces the calc with a pure flex chain:

- PersonalAssistant forks its root column: when a conversation is
  active it renders a `flex-1 min-h-0` child that centers the
  message list at max-w-[760px] and delegates scroll to the list's
  own internal virtual scroller. When no conversation is active the
  old `overflow-auto` wrapper remains so the greeting and empty
  state still scroll.
- ChatMessageList's root becomes `flex min-h-0 flex-1 flex-col`,
  and its inner scroll div becomes `flex-1 min-h-0 overflow-auto`.
  The virtualizer now measures the actual flex-derived height,
  which tracks input-bar size changes automatically.

Tests: src/components/frame/ + src/components/assistant/ +
ChatMessageList.test — 109 passed (6 todo).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/components/ChatMessageList.tsx |  4 +-
 ui/src/pages/PersonalAssistant.tsx    | 54 +++++++++++++++------------
 2 files changed, 33 insertions(+), 25 deletions(-)

diff --git a/ui/src/components/ChatMessageList.tsx b/ui/src/components/ChatMessageList.tsx
index df7d4a5f..c084ff03 100644
--- a/ui/src/components/ChatMessageList.tsx
+++ b/ui/src/components/ChatMessageList.tsx
@@ -138,10 +138,10 @@ export function ChatMessageList({
   }
 
   return (
-    <div className="relative flex-1">
+    <div className="relative flex min-h-0 flex-1 flex-col">
       <div
         ref={parentRef}
-        className="h-full overflow-auto p-3"
+        className="flex-1 min-h-0 overflow-auto p-3"
         onScroll={handleScroll}
       >
         <div
diff --git a/ui/src/pages/PersonalAssistant.tsx b/ui/src/pages/PersonalAssistant.tsx
index d1111dfb..80755d35 100644
--- a/ui/src/pages/PersonalAssistant.tsx
+++ b/ui/src/pages/PersonalAssistant.tsx
@@ -282,31 +282,39 @@ export function PersonalAssistant() {
         </div>
       )}
 
-      {/* Conversation thread — full-bleed, max-width 760px centered */}
-      <div className="flex-1 min-h-0 overflow-auto">
-        <div className="mx-auto w-full max-w-[760px] px-6 py-8">
-          {showHomeGreeting && (
-            <AssistantHomeGreeting
-              status={homeStatus}
-              userName={selectedCompany?.name ?? null}
+      {/* Conversation thread — full-bleed, max-width 760px centered.
+          Phase 16a replaced the old `h-[calc(100vh-320px)]` wrapper with
+          a pure flex-1 column so the virtualizer inherits its scroll
+          height from the flex layout instead of hard-coded viewport
+          arithmetic. Greeting and empty-state variants still scroll via
+          the outer `overflow-auto`; the active-conversation variant
+          delegates scroll to ChatMessageList's internal virtual scroller. */}
+      {hasActiveConversation && selectedConvId ? (
+        <div className="flex flex-1 min-h-0 justify-center">
+          <div className="flex w-full max-w-[760px] min-h-0 flex-1 flex-col">
+            <ChatMessageList
+              conversationId={selectedConvId}
+              streamingContent={streamingContent}
+              isStreaming={isStreaming}
             />
-          )}
-
-          {hasActiveConversation && selectedConvId && (
-            <div className="h-[calc(100vh-320px)] min-h-[320px]">
-              <ChatMessageList
-                conversationId={selectedConvId}
-                streamingContent={streamingContent}
-                isStreaming={isStreaming}
-              />
-            </div>
-          )}
-
-          {!showHomeGreeting && !selectedConvId && conversationCount === 0 && (
-            <p className="text-sm text-muted-foreground">No conversations yet.</p>
-          )}
+          </div>
         </div>
-      </div>
+      ) : (
+        <div className="flex-1 min-h-0 overflow-auto">
+          <div className="mx-auto w-full max-w-[760px] px-6 py-8">
+            {showHomeGreeting && (
+              <AssistantHomeGreeting
+                status={homeStatus}
+                userName={selectedCompany?.name ?? null}
+              />
+            )}
+
+            {!showHomeGreeting && !selectedConvId && conversationCount === 0 && (
+              <p className="text-sm text-muted-foreground">No conversations yet.</p>
+            )}
+          </div>
+        </div>
+      )}
 
       {/* Phase 12 — promote-to-project overlay. Absolutely positioned so
           the chat canvas is covered during the animation while keeping