From f4157063e63be2d8f0d3af664e945d7f1e774429 Mon Sep 17 00:00:00 2001 From: Cliff Hall Date: Sun, 14 Jun 2026 10:03:30 -0400 Subject: [PATCH] fix(web): give History/Network/Logging list scrollbars a gutter, hide when idle (#1474) (#1475) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix(web): give History/Network/Logging list scrollbars a gutter, hide when idle (#1474) The three main-content list panels rendered their ScrollArea.Autosize with the default type="hover" and no offsetScrollbars, so the scrollbar popped in on hover and overlaid the right edge of the cards (occluding the action icons / status badges). Add `offsetScrollbars` (reserves a 12px gutter so the bar never overlaps the cards) and `type="scroll"` (the bar shows only during active scrolling, then fades — no hover-pop) to HistoryListPanel, NetworkStreamPanel, and LogStreamPanel. Verified in a real browser; adds a story assertion guarding the gutter + idle-hidden behavior. Co-Authored-By: Claude Opus 4.8 (1M context) * test(web): assert scrollbar gutter on all three list panels (#1475 review) Per review, regression-protect the gutter + idle-hidden scrollbar in every panel, not just History. Extract the assertion into a shared `expectScrollbarGutterIdleHidden` helper and use it from the History, Network, and Logging panel stories. Co-Authored-By: Claude Opus 4.8 (1M context) * test(web): assert a scrollbar exists so idle-hidden check isn't vacuous (#1475 review) Add `expect(scrollbars.length).toBeGreaterThan(0)` before the loop so the idle-hidden assertion is meaningful rather than trivially-true if a future change stops rendering the scrollbar element. Co-Authored-By: Claude Opus 4.8 (1M context) --------- Co-authored-by: Claude Opus 4.8 (1M context) --- .../HistoryListPanel.stories.tsx | 7 +++++ .../HistoryListPanel/HistoryListPanel.tsx | 2 ++ .../LogStreamPanel/LogStreamPanel.stories.tsx | 5 ++++ .../groups/LogStreamPanel/LogStreamPanel.tsx | 2 ++ .../NetworkStreamPanel.stories.tsx | 5 ++++ .../NetworkStreamPanel/NetworkStreamPanel.tsx | 2 ++ .../web/src/test/scrollAreaStoryAssertions.ts | 27 +++++++++++++++++++ 7 files changed, 50 insertions(+) create mode 100644 clients/web/src/test/scrollAreaStoryAssertions.ts diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.stories.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.stories.tsx index e14dc035..d27dbbc0 100644 --- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.stories.tsx +++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.stories.tsx @@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import type { MessageEntry } from "../../../../../../core/mcp/types.js"; import { fn } from "storybook/test"; import { HistoryListPanel } from "./HistoryListPanel.js"; +import { expectScrollbarGutterIdleHidden } from "../../../test/scrollAreaStoryAssertions"; const meta: Meta = { title: "Groups/HistoryListPanel", @@ -102,6 +103,12 @@ export const WithEntries: Story = { entries: sampleEntries, pinnedIds: new Set(["req-4"]), }, + // The list ScrollArea reserves a scrollbar gutter (offsetScrollbars) so the + // bar never overlays the cards, and uses type="scroll" so it stays hidden + // when idle rather than appearing on hover (#1474). + play: async ({ canvasElement }) => { + expectScrollbarGutterIdleHidden(canvasElement); + }, }; export const Empty: Story = { diff --git a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx index 52be4564..1d05d8cc 100644 --- a/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx +++ b/clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx @@ -264,6 +264,8 @@ export function HistoryListPanel({ {pinnedEntries.length > 0 && ( diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx index 30ff29f4..3fb4d2c7 100644 --- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx +++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.stories.tsx @@ -3,6 +3,7 @@ import type { LoggingLevel } from "@modelcontextprotocol/sdk/types.js"; import { fn } from "storybook/test"; import { LogStreamPanel } from "./LogStreamPanel"; import type { LogEntryData } from "../../elements/LogEntry/LogEntry"; +import { expectScrollbarGutterIdleHidden } from "../../../test/scrollAreaStoryAssertions"; const meta: Meta = { title: "Groups/LogStreamPanel", @@ -74,4 +75,8 @@ export const WithEntries: Story = { args: { entries, }, + // List scrollbar reserves a gutter and stays hidden when idle (#1474). + play: async ({ canvasElement }) => { + expectScrollbarGutterIdleHidden(canvasElement); + }, }; diff --git a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx index 28672fc2..b164f649 100644 --- a/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx +++ b/clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx @@ -110,6 +110,8 @@ export function LogStreamPanel({ {filteredEntries.map((entry, index) => ( diff --git a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.stories.tsx b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.stories.tsx index 44d8e80f..56f88610 100644 --- a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.stories.tsx +++ b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.stories.tsx @@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { fn } from "storybook/test"; import type { FetchRequestEntry } from "../../../../../../core/mcp/types.js"; import { NetworkStreamPanel } from "./NetworkStreamPanel"; +import { expectScrollbarGutterIdleHidden } from "../../../test/scrollAreaStoryAssertions"; const meta: Meta = { title: "Groups/NetworkStreamPanel", @@ -47,6 +48,10 @@ const sample: FetchRequestEntry[] = [ export const WithEntries: Story = { args: { entries: sample }, + // List scrollbar reserves a gutter and stays hidden when idle (#1474). + play: async ({ canvasElement }) => { + expectScrollbarGutterIdleHidden(canvasElement); + }, }; export const Empty: Story = { diff --git a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx index 2b29e1ea..7f8b24d8 100644 --- a/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx +++ b/clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx @@ -137,6 +137,8 @@ export function NetworkStreamPanel({ {filteredEntries.map((entry) => ( diff --git a/clients/web/src/test/scrollAreaStoryAssertions.ts b/clients/web/src/test/scrollAreaStoryAssertions.ts new file mode 100644 index 00000000..a78a8969 --- /dev/null +++ b/clients/web/src/test/scrollAreaStoryAssertions.ts @@ -0,0 +1,27 @@ +import { expect } from "storybook/test"; + +/** + * Assert a list `ScrollArea.Autosize` reserves a scrollbar gutter + * (`offsetScrollbars`, so the bar never overlays the cards) and keeps the bar + * hidden when idle (`type="scroll"`, so it shows only while scrolling rather + * than on hover). Shared by the History/Network/Logging panel stories (#1474). + */ +export function expectScrollbarGutterIdleHidden(canvasElement: HTMLElement) { + const viewport = canvasElement.querySelector(".mantine-ScrollArea-viewport"); + if (!(viewport instanceof HTMLElement)) { + throw new Error("scroll viewport not found"); + } + // offsetScrollbars reserves a non-zero inline-end gutter for the scrollbar. + const pad = parseFloat(getComputedStyle(viewport).paddingInlineEnd); + expect(pad).toBeGreaterThan(0); + // type="scroll" → scrollbars are mounted but hidden until the user scrolls. + // Assert at least one exists first so the loop isn't trivially-true if a + // future change stops rendering the scrollbar element. + const scrollbars = canvasElement.querySelectorAll( + ".mantine-ScrollArea-scrollbar", + ); + expect(scrollbars.length).toBeGreaterThan(0); + for (const bar of scrollbars) { + expect(bar.getAttribute("data-state")).toBe("hidden"); + } +}