feat(FN-1816): merge fusion/fn-1816

packages/dashboard/app/components/__tests__/ChatView.test.tsx

@@ -3,11 +3,15 @@
  * new chat dialog, and input handling.
  */
 
+import fs from "node:fs";
+import path from "node:path";
 import { render, screen, waitFor, within } from "@testing-library/react";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 import { userEvent } from "@testing-library/user-event";
 import { ChatView } from "../ChatView";
 
+const stylesPath = path.resolve(__dirname, "../../styles.css");
+
 // Mock scrollIntoView for JSDOM
 Element.prototype.scrollIntoView = vi.fn();
 import * as useChatModule from "../../hooks/useChat";
@@ -448,3 +452,25 @@ describe("ChatView", () => {
     expect(within(sessionItem).getByText("my-custom-agent")).toBeInTheDocument();
   });
 });
+
+describe("ChatView CSS — nested flexbox scrolling fix", () => {
+  const css = fs.readFileSync(stylesPath, "utf-8");
+
+  it(".chat-session-list has min-height: 0 for proper vertical scrolling", () => {
+    const match = css.match(/\.chat-session-list\s*\{([^}]*)\}/);
+    expect(match).toBeTruthy();
+    expect(match![1]).toContain("min-height: 0");
+  });
+
+  it(".chat-thread has min-height: 0 for proper vertical scrolling", () => {
+    const match = css.match(/\.chat-thread\s*\{([^}]*)\}/);
+    expect(match).toBeTruthy();
+    expect(match![1]).toContain("min-height: 0");
+  });
+
+  it(".chat-messages has min-height: 0 for proper vertical scrolling", () => {
+    const match = css.match(/\.chat-messages\s*\{([^}]*)\}/);
+    expect(match).toBeTruthy();
+    expect(match![1]).toContain("min-height: 0");
+  });
+});

packages/dashboard/app/styles.css

@@ -27586,6 +27586,7 @@ html .column.drag-over * {
 
 .chat-session-list {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: 4px 8px;
 }
@@ -27668,6 +27669,7 @@ html .column.drag-over * {
   display: flex;
   flex-direction: column;
   min-width: 0;
+  min-height: 0;
 }
 
 .chat-thread-header {
@@ -27686,6 +27688,7 @@ html .column.drag-over * {
 /* Messages */
 .chat-messages {
   flex: 1;
+  min-height: 0;
   overflow-y: auto;
   padding: 16px;
   display: flex;