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<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 = {
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({
         <ScrollArea.Autosize
           viewportRef={viewportRef}
           mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)"
+          type="scroll"
+          offsetScrollbars
         >
           <Stack gap="md">
             {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<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);
+  },
 };
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({
         <ScrollArea.Autosize
           viewportRef={viewportRef}
           mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)"
+          type="scroll"
+          offsetScrollbars
         >
           <Stack gap="xs">
             {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<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 = {
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({
         <ScrollArea.Autosize
           viewportRef={viewportRef}
           mah="calc(100vh - var(--app-shell-header-height, 0px) - 150px)"
+          type="scroll"
+          offsetScrollbars
         >
           <Stack gap="md">
             {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");
+  }
+}