MrSphay/odysseus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Cookbook: make the GPU process popup actually visible

Browse Source 
Two bugs hid the popup that opens on double-click (or right-click) of
a GPU button in the Serve panel:

1. z-index 240 vs the cookbook modal at 260 — popup rendered behind
   the modal it was spawned from.

2. Horizontal position was just `button.left`, with no clamp against
   the viewport. GPU buttons sit near the right edge of the modal, so
   the popup got anchored at a left that pushed most of its body past
   the viewport's right edge.

Switch the popup to position:fixed (escapes scrolling / transform
stacking contexts on any ancestor), bump z-index to 10010 (above the
themed-confirm / overlay layer that sits around 9000-10000), and
clamp left/top after measuring the rendered size — including flipping
above the button if there isn't room below. The popup is now fully
visible regardless of which GPU button it's anchored to or how
narrow the viewport is.
This commit is contained in:
Sirsyorrz
2026-06-02 01:10:52 +10:00
parent 70a71f603c
commit 853576273a
2 changed files with 23 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
static/js/cookbookServe.js
View File

@@ -949,9 +949,24 @@ function _rerenderCachedModels() {
document.body.appendChild(popup);
panel._gpuProbe.popup = popup;
// Position below the button using viewport coords (popup is
// position:fixed). Measure the popup AFTER it's in the DOM so
// we get the real rendered size, then clamp both axes so the
// popup stays fully visible — GPU buttons near the right edge
// of the modal previously anchored the popup mostly off-screen.
const r = anchorBtn.getBoundingClientRect();
popup.style.left = `${Math.max(8, r.left)}px`;
popup.style.top = `${r.bottom + 4 + window.scrollY}px`;
const vw = window.innerWidth || document.documentElement.clientWidth;
const vh = window.innerHeight || document.documentElement.clientHeight;
const pw = popup.offsetWidth || 320;
const ph = popup.offsetHeight || 200;
let left = r.left;
let top = r.bottom + 4;
// Push left so the popup doesn't overflow the right edge.
if (left + pw > vw - 8) left = Math.max(8, vw - pw - 8);
// If there isn't room below, render above the button instead.
if (top + ph > vh - 8) top = Math.max(8, r.top - ph - 4);
popup.style.left = `${left}px`;
popup.style.top = `${top}px`;
popup.querySelector('.cookbook-gpu-popup-close')?.addEventListener('click', _closeProbePopup);
popup.querySelectorAll('.cookbook-gpu-kill').forEach(btn => {

8
static/style.css
View File

@@ -17773,8 +17773,12 @@ body.gallery-selecting .gallery-dl-btn,
.cookbook-gpu-clear:disabled { opacity: 0.4; cursor: wait; }
/* GPU probe popup — per-GPU process list with kill buttons */
.cookbook-gpu-popup {
position: absolute;
z-index: 240;
/* Fixed positioning (relative to viewport) so we never get pulled into
a scrolling/transform stacking context from an ancestor. Z-index has
to clear the cookbook modal (260) and the rest of the high-z UI
layers (themed-confirm and various overlays sit around 9000-10000). */
position: fixed;
z-index: 10010;
min-width: 280px;
max-width: 420px;
background: var(--panel, #1a1a1a);