From 378980de0cb2bce8fa44eb77d4a2a90a7f1ae22c Mon Sep 17 00:00:00 2001 From: kristianwind Date: Thu, 3 Sep 2026 12:14:39 +0200 Subject: [PATCH] fix(sidebar): the scrollbar sits at the edge, thin and dim MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit It sat a pad-width inside the right edge because the scroller lives inside the sidebar's padding, so it read as floating in the middle. Pull the scroller out to the border and pad the content back — the rows do not move — and make the bar thin and dim so it is present without drawing the eye. Co-Authored-By: Claude Opus 4.8 --- web/src/lib/components/Sidebar.svelte | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) diff --git a/web/src/lib/components/Sidebar.svelte b/web/src/lib/components/Sidebar.svelte index 971986e..119373f 100644 --- a/web/src/lib/components/Sidebar.svelte +++ b/web/src/lib/components/Sidebar.svelte @@ -1075,6 +1075,30 @@ display: flex; flex-direction: column; gap: var(--s5); + /* The sidebar is padded, so the scrollbar sat a pad-width inside the edge and + read as floating in the middle. Pull the scroller out to the border and pad + the content back, so the bar sits against the edge where a scrollbar + belongs — the rows do not move. Thin and dim, so it is present without + drawing the eye. */ + margin-right: calc(var(--s3) * -1); + padding-right: var(--s3); + scrollbar-width: thin; + scrollbar-color: var(--line-strong) transparent; + } + + .scroller::-webkit-scrollbar { + width: 10px; + } + + .scroller::-webkit-scrollbar-thumb { + background: var(--line-strong); + border-radius: 999px; + border: 3px solid transparent; + background-clip: padding-box; + } + + .scroller::-webkit-scrollbar-track { + background: transparent; } /* Wider than it looks: a 1px target is a target you miss. The visible line stays