kw/verdande
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(sidebar): the scrollbar sits at the edge, thin and dim

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
kristianwind
2026-09-03 12:14:39 +02:00
co-authored by Claude Opus 4.8
parent 04c7a52a5a
commit 378980de0c
1 changed files with 24 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web/src/lib/components/Sidebar.svelte
+24
View File
@@ -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