From 04a11815c41f3e0cdf9afc3059de1e1b07bf5ec7 Mon Sep 17 00:00:00 2001 From: sktbrd Date: Sat, 15 Aug 2026 11:46:31 -0300 Subject: [PATCH] fix(stake): style the stake dialog's scrollbar MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The dialog is taller than the viewport, so it scrolls. Unstyled, it drew the platform default — on macOS with "always show scrollbars" that is a wide light-grey track running down the inside of a rounded dark panel, reading as a browser artifact stuck onto the design rather than part of it. Same recipe BountyCardFan already uses (thin, rounded WebKit thumb, transparent track) with one change: its thumb is `bg-white/15`, and this surface is `bg-background`, which follows the theme — a fixed white thumb would vanish on a light page. `foreground/20` inverts with it, `/30` on hover. Measured on the open dialog, classes on vs off: the reserved gutter drops from 19px to 15px and `::-webkit-scrollbar` width from `auto` to 6px. Worth knowing that 6px is not the whole story — the gutter implies the engine still reserves more than the declared width, so this makes the bar quiet rather than exactly 6px wide. Co-Authored-By: Claude Opus 5 (1M context) --- src/components/stake/GnarsStakeDialog.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/components/stake/GnarsStakeDialog.tsx b/src/components/stake/GnarsStakeDialog.tsx index 94cf3214..6175497c 100644 --- a/src/components/stake/GnarsStakeDialog.tsx +++ b/src/components/stake/GnarsStakeDialog.tsx @@ -113,7 +113,17 @@ export function GnarsStakeDialog({ open, onOpenChange }: Props) { return ( - + {/* The dialog is taller than the viewport, so it scrolls. Left unstyled it + draws the platform's default bar — on macOS with "always show + scrollbars" that is a wide light-grey track running down the inside of + a rounded dark panel, which reads as a browser artifact rather than + part of the panel. + + Same recipe BountyCardFan already uses (thin + rounded WebKit thumb), + with one change: its thumb is `bg-white/15`, and this surface is + `bg-background`, which follows the theme — a fixed white thumb would + vanish on a light page. `foreground/20` inverts with it. */} +
{/* Header */}