itlxrd/Psychotoxical-psysonic
1
0
Fork 0
mirror of https://github.com/Psychotoxical/psysonic.git synced 2026-07-22 07:15:47 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix(ui): queue panel resize handle no longer blocked by main scroll hit-test

Browse Source 
The queue resizer overlaps the main column by a few pixels; treating
clientX <= mainRight as "main" suppressed grabs on that strip. Cap overlay
thumb horizontal slop at mainRight so it does not steal hits on the
resizer. Sidebar / other overlay thumbs stay out of scope via selector.
This commit is contained in:
Maxim Isaev
2026-04-26 17:51:31 +03:00
parent 67a100ee3f
commit 90a6f09b9f
1 changed files with 12 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.tsx
+12 -3
View File
@@ -116,12 +116,20 @@ function RequireAuth({ children }: { children: React.ReactNode }) {
/** /**
* Avoid grabbing the queue resizer when aiming at the main overlay scrollbar. * Avoid grabbing the queue resizer when aiming at the main overlay scrollbar.
* Uses the real main viewport edge (not innerWidth − queueWidth — sidebar/zoom skew that). * Uses the real main viewport edge (not innerWidth − queueWidth — sidebar/zoom skew that).
* Only the main-route thumb counts (not queue/mini thumbs, which share the same class). * Only the main-route thumb counts (not queue/mini/sidebar thumbs — selector is scoped).
*
* The queue resizer is 6px and sits on the main|queue seam with ~3px overlapping the main
* column (layout.css `.resizer-queue`). Treating `clientX <= mainRight` as "main" suppressed
* that overlap and felt like a dead resize strip at certain widths. Thumb hit slop must not
* extend past `mainRight` or it steals grabs on the resizer.
*/ */
function shouldSuppressQueueResizerMouseDown(clientX: number, clientY: number, queueWidth: number): boolean { function shouldSuppressQueueResizerMouseDown(clientX: number, clientY: number, queueWidth: number): boolean {
const vp = document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID) as HTMLElement | null; const vp = document.getElementById(APP_MAIN_SCROLL_VIEWPORT_ID) as HTMLElement | null;
const mainRight = vp ? vp.getBoundingClientRect().right : window.innerWidth - queueWidth; const mainRight = vp ? vp.getBoundingClientRect().right : window.innerWidth - queueWidth;
if (clientX <= mainRight) return true; /** Pixels of the resizer that lie left of the main column's right edge (see `.resizer-queue`). */
const RESIZER_BLEED_INTO_MAIN = 4;
if (clientX <= mainRight - RESIZER_BLEED_INTO_MAIN) return true;
const thumbs = document.querySelectorAll<HTMLElement>('.app-shell-route-scroll .overlay-scroll__thumb'); const thumbs = document.querySelectorAll<HTMLElement>('.app-shell-route-scroll .overlay-scroll__thumb');
const xSlop = 22; const xSlop = 22;
@@ -130,7 +138,8 @@ function shouldSuppressQueueResizerMouseDown(clientX: number, clientY: number, q
const r = thumbs[i].getBoundingClientRect(); const r = thumbs[i].getBoundingClientRect();
if (r.height < 4 || r.width < 1) continue; if (r.height < 4 || r.width < 1) continue;
if (clientY < r.top - vPad || clientY > r.bottom + vPad) continue; if (clientY < r.top - vPad || clientY > r.bottom + vPad) continue;
if (clientX >= r.left - 6 && clientX <= r.right + xSlop) return true; const thumbHitRight = Math.min(r.right + xSlop, mainRight);
if (clientX >= r.left - 6 && clientX <= thumbHitRight) return true;
} }
return false; return false;
} }