From 3b3c5ed0bf4c693358fb58cbb016f961cdb8c1c8 Mon Sep 17 00:00:00 2001 From: gsxdsm Date: Mon, 8 Jun 2026 08:21:20 -0700 Subject: [PATCH] FN-5997: fix mobile chat empty state spacing Remove the extra mobile right margin from chat empty states while preserving other chat pane states. - add mobile message-pane padding and remove card chrome from empty-state containers inside mobile chat messages - expand the mobile chat rendering regression test to cover direct threads, room threads, loading, populated, streaming, and new-chat empty states - rename the regression suite to FN-5997 and assert the empty state spans the full mobile message pane Files changed: packages/dashboard/app/components/ChatView.css | 9 +++++ .../__tests__/ChatView.mobile-render.test.tsx | 46 +++++++++++++++------- 2 files changed, 40 insertions(+), 15 deletions(-) Fusion-Task-Id: FN-5997 Fusion-Task-Lineage: ea424660-e8c6-4691-9234-463866aacb2e --- .../dashboard/app/components/ChatView.css | 9 ++++ .../__tests__/ChatView.mobile-render.test.tsx | 46 +++++++++++++------ 2 files changed, 40 insertions(+), 15 deletions(-) diff --git a/packages/dashboard/app/components/ChatView.css b/packages/dashboard/app/components/ChatView.css index d89f850d56..9acd257cea 100644 --- a/packages/dashboard/app/components/ChatView.css +++ b/packages/dashboard/app/components/ChatView.css @@ -1775,10 +1775,19 @@ .chat-messages { min-height: 0; overflow-y: auto; + padding: var(--space-lg) var(--space-sm); -webkit-overflow-scrolling: touch; touch-action: pan-y; } + .chat-messages > .chat-empty-state { + padding: var(--space-xl) var(--space-sm); + border: none; + border-radius: 0; + background: transparent; + box-sizing: border-box; + } + .chat-thread-header-identity { flex: 1 1 auto; min-width: 0; diff --git a/packages/dashboard/app/components/__tests__/ChatView.mobile-render.test.tsx b/packages/dashboard/app/components/__tests__/ChatView.mobile-render.test.tsx index b3efcf4745..593346ccca 100644 --- a/packages/dashboard/app/components/__tests__/ChatView.mobile-render.test.tsx +++ b/packages/dashboard/app/components/__tests__/ChatView.mobile-render.test.tsx @@ -1,5 +1,5 @@ import { beforeEach, describe, expect, it, vi } from "vitest"; -import { act, cleanup, render, screen } from "@testing-library/react"; +import { act, cleanup, render, screen, within } from "@testing-library/react"; import { ChatView } from "../ChatView"; import { loadAllAppCss } from "../../test/cssFixture"; import * as useChatModule from "../../hooks/useChat"; @@ -139,7 +139,23 @@ function setupRooms(overrides: Partial = {}) { mockUseChatRooms.mockReturnValue({ ...defaultRoomsState, ...overrides }); } -describe("FN-5948 mobile chat message pane rendering", () => { +function expectMobileEmptyStateToSpanMessagePane(text: string) { + const emptyState = screen.getByText(text).closest(".chat-empty-state") as HTMLElement | null; + expect(emptyState).toBeTruthy(); + expect(emptyState?.parentElement?.classList.contains("chat-messages")).toBe(true); + + const messagesStyle = getComputedStyle(emptyState?.parentElement as HTMLElement); + const emptyStateStyle = getComputedStyle(emptyState as HTMLElement); + + expect(messagesStyle.paddingLeft).toBe(messagesStyle.paddingRight); + expect(emptyStateStyle.width).toBe("100%"); + expect(emptyStateStyle.display).toBe("flex"); + expect(emptyStateStyle.justifyContent).toBe("center"); + expect(emptyStateStyle.textAlign).toBe("center"); + expect(emptyStateStyle.boxSizing).toBe("border-box"); +} + +describe("FN-5997 mobile chat message pane rendering", () => { beforeEach(() => { vi.clearAllMocks(); document.head.innerHTML = ""; @@ -149,7 +165,7 @@ describe("FN-5948 mobile chat message pane rendering", () => { setupRooms(); }); - it("keeps the regular mobile empty message pane centered and framed while preserving other direct-thread states", async () => { + it("lets the direct-thread mobile empty states span the message pane without mobile card chrome while preserving other states", async () => { const restoreMatchMedia = mockViewportMode("mobile"); try { setupChat({ @@ -160,12 +176,16 @@ describe("FN-5948 mobile chat message pane rendering", () => { await renderWithCss(); - const emptyState = screen.getByText("No messages yet. Start the conversation!").closest(".chat-empty-state"); - expect(emptyState).toBeTruthy(); - expect(getComputedStyle(emptyState as HTMLElement).display).toBe("flex"); - expect(getComputedStyle(emptyState as HTMLElement).justifyContent).toBe("center"); - expect(getComputedStyle(emptyState as HTMLElement).textAlign).toBe("center"); - expect(css).toMatch(/\.chat-messages\s*>\s*\.chat-empty-state\s*\{[\s\S]*border:\s*1px solid var\(--border\);[\s\S]*background:\s*var\(--surface\);/); + expectMobileEmptyStateToSpanMessagePane("No messages yet. Start the conversation!"); + expect(css).toMatch(/@media \(max-width: 768px\)\s*\{[\s\S]*\.chat-messages\s*\{[\s\S]*padding:\s*var\(--space-lg\) var\(--space-sm\);[\s\S]*\.chat-messages\s*>\s*\.chat-empty-state\s*\{[\s\S]*border:\s*none;[\s\S]*border-radius:\s*0;[\s\S]*background:\s*transparent;/); + + cleanup(); + document.head.innerHTML = ""; + setupChat(); + await renderWithCss(); + expectMobileEmptyStateToSpanMessagePane("Start a new conversation"); + const startConversationEmptyState = screen.getByText("Start a new conversation").closest(".chat-empty-state") as HTMLElement; + expect(within(startConversationEmptyState).getByRole("button", { name: "New Chat" })).toBeInTheDocument(); cleanup(); document.head.innerHTML = ""; @@ -206,7 +226,7 @@ describe("FN-5948 mobile chat message pane rendering", () => { } }); - it("keeps the rooms mobile empty pane centered and framed while preserving room loading and populated states", async () => { + it("lets the rooms mobile empty pane span the message pane without mobile card chrome while preserving room loading and populated states", async () => { const restoreMatchMedia = mockViewportMode("mobile"); try { localStorage.setItem("fusion:chat-scope", "rooms"); @@ -225,11 +245,7 @@ describe("FN-5948 mobile chat message pane rendering", () => { }); await renderWithCss(); - const emptyState = screen.getByText("No messages yet. Start the conversation!").closest(".chat-empty-state"); - expect(emptyState).toBeTruthy(); - expect(getComputedStyle(emptyState as HTMLElement).display).toBe("flex"); - expect(getComputedStyle(emptyState as HTMLElement).justifyContent).toBe("center"); - expect(css).toMatch(/\.chat-messages\s*>\s*\.chat-empty-state\s*\{[\s\S]*border:\s*1px solid var\(--border\);[\s\S]*background:\s*var\(--surface\);/); + expectMobileEmptyStateToSpanMessagePane("No messages yet. Start the conversation!"); cleanup(); document.head.innerHTML = "";