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
1 changed files with 50 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

27
clients/web/src/test/scrollAreaStoryAssertions.ts Normal file
View file

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