Skip to content

fix(ui): theme the ScrollArea scrollbar to match the app - #190

Merged
mrsibe merged 1 commit into
mainfrom
fix/themed-scrollbar
Sep 30, 2026
Merged

mrsibe merged 1 commit into
mainfrom
fix/themed-scrollbar

Conversation

@mrsibe

@mrsibe mrsibe commented Sep 30, 2026

Copy link
Copy Markdown
Owner

What does this PR do?

Makes the Radix ScrollArea scrollbar use the same themed look as the native
themed-scrollbar util, so the library (knowledge base) — and every other
ScrollArea — stops reading as an OS-default grey bar.

Why?

The library panel's document list is a Radix ScrollArea. Its thumb was
bg-border, and --border (#e5e3df light, #2f2f2f dark) sits almost on top
of the panel surface, so the bar read as the default OS scrollbar rather than as
the app's scroll control. Meanwhile every plain overflow container uses
.themed-scrollbar, which draws a --muted-foreground pill — two different
scrollbars in one app.

DESIGN.md already prescribes .themed-scrollbar for panel content
(overflow-y-auto themed-scrollbar). This change makes the Radix variant the
same control instead of a second look.

Related issue

Standalone UI fix; no issue.

What changed?

  • src/renderer/src/components/ui/scroll-area.tsx: the scrollbar is an 8px
    track and the thumb is a 4px --muted-foreground pill (border-2 border-transparent bg-clip-content) that darkens to --foreground on hover —
    the same geometry and colours .themed-scrollbar draws for the native path.
    The old 10px bg-border thumb is gone.
  • DESIGN.md: documents that the two scroll controls are one control and must
    be changed together.

Native overflow containers are untouched; no behaviour change, only the paint.

How was this tested?

  • npm test — 478 pass.
  • npx electron-vite build — bundles; verified .bg-clip-content
    (background-clip: content-box) and .bg-muted-foreground are emitted into
    the built CSS.
  • npm run check:design — no violations.
  • npx eslint src/renderer/src/components/ui/scroll-area.tsx — no errors.

Note: npm run typecheck reports pre-existing errors on main in this
environment (Home.tsx:71, MessageItem.tsx:56,
services/retrieval/evidence.ts), unchanged by this PR. CI is the source of
truth for the gate.

Screenshots / recordings

Not attached: this environment has no display to capture the Electron window.
The visible change is the library scrollbar going from a faint --border grey to
the darker --muted-foreground pill used everywhere else, darkening on hover.

Checklist

  • I have reviewed my own changes.
  • npm run typecheck passes (see note).
  • npm run build (bundling) passes.
  • I have tested the affected user workflow visually.
  • I have not included unrelated changes.
  • I have updated documentation when necessary.

Desktop / build changes

  • Not applicable

@github-actions github-actions Bot added the bug Something isn't working label Sep 30, 2026
@mrsibe
mrsibe merged commit 69b7680 into main Sep 30, 2026
4 checks passed
@mrsibe
mrsibe deleted the fix/themed-scrollbar branch September 30, 2026 08:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Something isn't working

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant