fix(web): give History/Network/Logging list scrollbars a gutter, hide when idle (#1474) (#1475)

* 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) <noreply@anthropic.com>

* 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) <noreply@anthropic.com>

* 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) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

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<typeof HistoryListPanel> = {
   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 = {

clients/web/src/components/groups/HistoryListPanel/HistoryListPanel.tsx

@@ -264,6 +264,8 @@ export function HistoryListPanel({
         <ScrollArea.Autosize
           viewportRef={viewportRef}
           mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)"
+          type="scroll"
+          offsetScrollbars
         >
           <Stack gap="md">
             {pinnedEntries.length > 0 && (

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<typeof LogStreamPanel> = {
   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);
+  },
 };

clients/web/src/components/groups/LogStreamPanel/LogStreamPanel.tsx

@@ -110,6 +110,8 @@ export function LogStreamPanel({
         <ScrollArea.Autosize
           viewportRef={viewportRef}
           mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)"
+          type="scroll"
+          offsetScrollbars
         >
           <Stack gap="xs">
             {filteredEntries.map((entry, index) => (

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<typeof NetworkStreamPanel> = {
   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 = {

clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx

@@ -137,6 +137,8 @@ export function NetworkStreamPanel({
         <ScrollArea.Autosize
           viewportRef={viewportRef}
           mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)"
+          type="scroll"
+          offsetScrollbars
         >
           <Stack gap="md">
             {filteredEntries.map((entry) => (

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");
+  }
+}