chore(dashboard): make vpdebug overlay self-healing

If something (React portal, modal mount, third-party widget) detaches
the overlay or covers it with a later body child, the overlay now
re-appends itself to the end of document.body on every update tick.
Lets us capture the post-task-load state even when something is
fighting it for top-of-body paint order.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
gsxdsm
2026-05-22 10:32:36 -07:00
parent 16b18bf338
commit 301e0a050f

View File

@@ -12,7 +12,18 @@
var box = document.createElement('div'); var box = document.createElement('div');
box.style.cssText = box.style.cssText =
'position:fixed;top:0;right:0;z-index:2147483647;background:#000;color:#0f0;font:11px/1.3 monospace;padding:6px 8px;border:1px solid #0f0;white-space:pre;pointer-events:none;max-width:60vw;'; 'position:fixed;top:0;right:0;z-index:2147483647;background:#000;color:#0f0;font:11px/1.3 monospace;padding:6px 8px;border:1px solid #0f0;white-space:pre;pointer-events:none;max-width:60vw;';
var ensureAttached = function () {
if (document.body && box.parentNode !== document.body) {
document.body.appendChild(box);
} else if (document.body) {
// Force to last child so it wins paint order regardless of stacking ctx
if (document.body.lastChild !== box) {
document.body.appendChild(box);
}
}
};
var update = function () { var update = function () {
ensureAttached();
var f = function (el) { var f = function (el) {
if (!el) return 'none'; if (!el) return 'none';
var r = el.getBoundingClientRect(); var r = el.getBoundingClientRect();