Monorepo for Aesthetic.Computer
aesthetic.computer
fix: move Monaco context menu to body-level DOM node
Use overflowWidgetsDomNode option to append Monaco's overflow
widgets (including context menu) to a container on <body>, fully
outside the editor panel hierarchy. This escapes all ancestor
stacking contexts so the menu renders on top of everything.
Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
+18
-10
+18
-10
system/public/kidlisp.com/index.html
+18
-10
system/public/kidlisp.com/index.html
···
291
291
padding: 0 !important;
292
292
}
293
293
294
-
/* Ensure Monaco context menu and widgets render above all page UI
295
-
(gutters z-index: 1-2, center-square z-index: 999) */
296
-
.monaco-menu-container,
297
-
.shadow-root-host,
298
-
.monaco-editor .context-view,
299
-
.monaco-action-bar,
300
-
.monaco-editor .editor-widget,
301
-
.monaco-editor .overflowingContentWidgets,
302
-
.overflowingContentWidgets {
294
+
/* Body-level container for Monaco overflow widgets (context menu).
295
+
Appended to <body> via JS so it escapes all ancestor stacking contexts. */
296
+
#monaco-overflow-widgets {
297
+
position: relative;
298
+
z-index: 200000;
299
+
}
300
+
#monaco-overflow-widgets .monaco-menu-container,
301
+
#monaco-overflow-widgets .shadow-root-host,
302
+
#monaco-overflow-widgets .context-view,
303
+
#monaco-overflow-widgets .action-bar,
304
+
#monaco-overflow-widgets .editor-widget {
303
305
z-index: 200000 !important;
304
-
position: relative;
305
306
}
306
307
307
308
/* Flush Monaco text to top-left edge in stage mode */
···
15641
15642
15642
15643
// LOCAL indicator removed - no longer needed
15643
15644
15645
+
// Create a body-level container for Monaco overflow widgets (context menu)
15646
+
// so they escape all ancestor stacking contexts (gutters, headers, etc.)
15647
+
const overflowContainer = document.createElement('div');
15648
+
overflowContainer.id = 'monaco-overflow-widgets';
15649
+
document.body.appendChild(overflowContainer);
15650
+
15644
15651
// Create the editor
15645
15652
editor = monaco.editor.create(editorContainer, {
15653
+
overflowWidgetsDomNode: overflowContainer,
15646
15654
value: localStorage.getItem('kidlisp-code') || '',
15647
15655
language: 'kidlisp',
15648
15656
theme: initialTheme,