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

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 <[email protected]>
Merge pull request #38 from kristianwind/sidebar-color-polish
2026-09-03 12:14:39 +02:00 · 2026-09-03 12:08:32 +02:00
1 changed files with 24 additions and 0 deletions
@@ -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