fix(ui): overlay scrollbars, resizer hit-test, and Linux mini wheel (#255)

Add OverlayScrollArea with shared thumb metrics and drag handling; size the
thumb against the rail track height so panel insets cannot push it past the
visible rail. Route scroll uses a stable viewport id; Genres restores scroll
and infinite-scroll observation against that viewport (merged with upstream
virtualized genres list and lazy routes behind Suspense).

Suppress queue resizer activation when the pointer targets the main-route
overlay scrollbar; disable the resizer while dragging the thumb and use a
grabbing cursor on the body.

Apply WebKitGTK smooth wheel to the mini webview as well as main; the mini
window reapplies the persisted setting after auth store hydration.
This commit is contained in:
cucadmuh
2026-04-21 23:44:28 +03:00
committed by GitHub
parent 2318f9e07a
commit b61c168430
13 changed files with 538 additions and 130 deletions
+2 -34
View File
@@ -9418,47 +9418,19 @@ html.no-compositing .fs-seekbar-played {
}
.mini-queue-wrap {
.mini-queue-wrap.overlay-scroll {
flex: 1 1 auto;
position: relative;
background: var(--bg-card);
border-radius: 8px;
overflow: hidden;
min-height: 0;
margin-top: 10px;
}
.mini-queue {
height: 100%;
overflow-y: auto;
overscroll-behavior: contain;
.mini-queue.overlay-scroll__viewport {
padding: 4px;
display: flex;
flex-direction: column;
gap: 1px;
box-sizing: border-box;
/* Hide native scrollbar — we render an overlay thumb beside it. */
scrollbar-width: none;
}
.mini-queue::-webkit-scrollbar {
display: none;
}
.mini-queue__thumb {
position: absolute;
top: 4px;
right: 3px;
width: 4px;
border-radius: 2px;
background: var(--text-muted);
opacity: 0;
transition: opacity 0.18s ease;
pointer-events: none;
will-change: transform;
}
.mini-queue-wrap:hover .mini-queue__thumb,
.mini-queue.is-scrolling ~ .mini-queue__thumb {
opacity: 0.55;
}
.mini-queue__empty {
@@ -9490,10 +9462,6 @@ html.no-compositing .fs-seekbar-played {
background: var(--bg-hover);
}
.mini-queue-wrap--drop-active .mini-queue {
scroll-behavior: auto;
}
.mini-queue__item--current {
background: var(--accent-dim);
color: var(--accent);