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

Merge pull request #39 from kristianwind/sidebar-scrollbar-flush

Browse Source 
fix(sidebar): scrollbar flush to the edge, thin and dim
This commit is contained in:
Kristian Wind
2026-09-03 12:22:58 +02:00
committed by GitHub
parent 04c7a52a5a 378980de0c
commit dc4a584d5f
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; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--s5); 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 /* Wider than it looks: a 1px target is a target you miss. The visible line stays