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): style Resources accordion native scrollbars to match Mantine (#1466) (#1473)

Browse source 
* fix(web): style Resources accordion native scrollbars to match Mantine (#1466)

The per-section accordion panels (from #1462) scroll with a native
scrollbar, which looked inconsistent with the Mantine ScrollArea used
elsewhere. Style it to match: thin, rounded, translucent thumb on a
transparent track, via a new `--inspector-scrollbar-thumb` token
(rgba(0,0,0,.4) light / rgba(255,255,255,.4) dark, mirroring Mantine's
thumb), `scrollbar-width: thin` + `scrollbar-color` (Firefox) and
`::-webkit-scrollbar` rules (Chromium/WebKit).

A Mantine ScrollArea *component* can't be used here: its viewport has no
intrinsic height, which would collapse the panel's content-based
flex-basis that #1462's per-section sizing depends on (the sections would
stop sizing to their content). Documented inline. Verified in a real
browser that the per-section sizing/pinned-headers behavior is unchanged
and the scrollbar is now thin + themed in both color schemes.

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

* test(web): assert themed scrollbar-color on the accordion panel (#1473 review)

Guard the per-section scrollbar's themed thumb against regressions, per
review — `scrollbar-color` resolves to an rgba value (the
--inspector-scrollbar-thumb token) vs a transparent track. WebKit
pseudo-element styles aren't queryable, so this is the assertable proxy.

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 09:59:36 -04:00 • committed by GitHub
commit bef8b84ee8
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 42 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

9
clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx
View file

@ -256,7 +256,8 @@ export const ManyResources: Story = {
expect(tops[0]).toBeLessThan(tops[1]);
expect(tops[1]).toBeLessThan(tops[2]);
// The long URIs section scrolls within its own panel.
// The long URIs section scrolls within its own panel, with a thin styled
// scrollbar matching the Mantine ScrollArea look (#1466).
const urisPanel = canvasElement.querySelector(
".disclosure-sections .mantine-Accordion-panel",
);
@ -264,6 +265,12 @@ export const ManyResources: Story = {
throw new Error("URIs panel not found");
}
expect(urisPanel.scrollHeight).toBeGreaterThan(urisPanel.clientHeight);
const panelStyle = getComputedStyle(urisPanel);
expect(panelStyle.scrollbarWidth).toBe("thin");
// The themed translucent thumb resolves (the `--inspector-scrollbar-thumb`
// token, an rgba value, vs. a transparent track). WebKit pseudo-element
// styles aren't queryable, so `scrollbar-color` is the assertable proxy.
expect(panelStyle.scrollbarColor).toContain("rgba");
},
};