modelcontextprotocol/inspector
Watch
1
0
Fork
You've already forked inspector
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

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

Browse source 
* 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>
This commit is contained in:
Cliff Hall 2026-06-14 10:03:30 -04:00 • committed by GitHub
commit f4157063e6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 50 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

5
clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.stories.tsx
View file

@ -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 = {

2
clients/web/src/components/groups/NetworkStreamPanel/NetworkStreamPanel.tsx
View file

@ -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) => (