fix(web): style Resources accordion native scrollbars to match Mantine (#1466) (#1473)

* 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>

clients/web/src/App.css

@@ -36,6 +36,11 @@
   --inspector-border-default: var(--mantine-color-default-border);
   --inspector-border-subtle: var(--mantine-color-gray-3);
 
+  /* ── Scrollbar ─────────────────────────────────────────── */
+  /* Matches Mantine ScrollArea's thumb so native scrollbars (used where a
+     ScrollArea would break flex sizing, e.g. the Resources accordion) blend in. */
+  --inspector-scrollbar-thumb: rgba(0, 0, 0, 0.4);
+
   /* ── Connection status ─────────────────────────────────── */
   --inspector-status-connected: var(--mantine-color-green-6);
   --inspector-status-connecting: var(--mantine-color-yellow-6);
@@ -73,6 +78,7 @@
   --inspector-surface-code: var(--mantine-color-dark-9);
   --inspector-border-subtle: var(--mantine-color-gray-4);
   --inspector-input-background: var(--mantine-color-dark-9);
+  --inspector-scrollbar-thumb: rgba(255, 255, 255, 0.4);
 }
 
 /* ── Animations ──────────────────────────────────────────── */
@@ -212,7 +218,13 @@
  * (set in ResourceControls) hands space from long sections to short ones. With
  * `flex-grow: 0`, nothing expands or scrolls until the combined content
  * overflows the panel, so sections never scroll while the panel has free space
- * (issue #1462). Closed sections collapse to their header height. */
+ * (issue #1462). Closed sections collapse to their header height.
+ *
+ * The per-section scroll uses a NATIVE scrollbar, styled below to match
+ * Mantine's ScrollArea thumb (#1466). 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 the per-section sizing above depends
+ * on, so the sections would no longer size to their content. */
 
 .disclosure-sections {
   display: flex;
@@ -236,6 +248,27 @@
   flex: 1 1 auto;
   min-height: 0;
   overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--inspector-scrollbar-thumb) transparent;
+}
+
+.disclosure-sections
+  > .mantine-Accordion-item[data-active]
+  .mantine-Accordion-panel::-webkit-scrollbar {
+  width: 8px;
+}
+
+.disclosure-sections
+  > .mantine-Accordion-item[data-active]
+  .mantine-Accordion-panel::-webkit-scrollbar-thumb {
+  background-color: var(--inspector-scrollbar-thumb);
+  border-radius: 8px;
+}
+
+.disclosure-sections
+  > .mantine-Accordion-item[data-active]
+  .mantine-Accordion-panel::-webkit-scrollbar-track {
+  background: transparent;
 }
 
 /* ── List item hover ────────────────────────────────────── */

clients/web/src/components/screens/ResourcesScreen/ResourcesScreen.stories.tsx

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