finally have a proper scroll bar

frontend/style.css

@@ -445,38 +445,35 @@ tr[draggable="true"]:active { cursor: grabbing; }
     .album-art-lg { width: 120px; height: 120px; }
     .album-header { flex-direction: column; }
     .artist-photo { width: 80px; height: 80px; }
-    .scroll-track { right: 2px; width: 14px; }
-    .scroll-track-letter { font-size: 0.5rem; }
+    .scroll-track { width: 18px; }
+    .scroll-track-letter { font-size: 0.7rem; }
 }
 
-/* Alphabetical scroll track */
+/* Alphabetical scroll track — fixed to right edge next to browser scrollbar */
 .scroll-track {
     position: fixed;
-    right: 8px;
-    top: 60px;
-    bottom: 20px;
-    width: 24px;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    align-items: center;
+    right: 18px;
+    top: 0;
+    bottom: 0;
+    width: 28px;
     z-index: 100;
+    pointer-events: none;
+    overflow: hidden;
 }
 .scroll-track-letter {
-    font-size: 1.4rem;
+    pointer-events: auto;
+    font-size: 1.2rem;
     font-weight: 600;
-    color: var(--text-muted);
-    cursor: default;
-    padding: 0 2px;
-    line-height: 1;
-    user-select: none;
-    opacity: 0.3;
-}
-.scroll-track-letter.has-artists {
     color: var(--text-secondary);
     cursor: pointer;
-    opacity: 1;
+    padding: 0 4px;
+    line-height: 1;
+    user-select: none;
+    display: flex;
+    align-items: flex-start;
+    justify-content: center;
+    overflow: hidden;
 }
-.scroll-track-letter.has-artists:hover {
+.scroll-track-letter:hover {
     color: var(--accent);
 }