aesthetic.computer / core
Monorepo for Aesthetic.Computer aesthetic.computer
fork atom

fix: revert to normal Monaco context menu with high z-index on editor panel

Remove overflowWidgetsDomNode hack (shadow DOM blocked external styling).
Instead give .editor-panel z-index:100 so the context menu renders inside
Monaco with full theme styling and appears above sibling gutters/panels.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

prompt.ac/@jeffrey a16f346f 189e69b9

+4 -40
+4 -40
system/public/kidlisp.com/index.html
··· 291 291 padding: 0 !important; 292 292 } 293 293 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 { 305 - z-index: 200000 !important; 306 - } 307 - /* Context menu needs explicit background since it's outside .monaco-editor */ 308 - #monaco-overflow-widgets .monaco-menu { 309 - background: #ffffff; 310 - border: 1px solid #c8c8c8; 311 - border-radius: 4px; 312 - box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); 313 - } 314 - @media (prefers-color-scheme: dark) { 315 - #monaco-overflow-widgets .monaco-menu { 316 - background: #252526; 317 - border-color: #454545; 318 - } 319 - } 320 - [data-theme="dark"] #monaco-overflow-widgets .monaco-menu { 321 - background: #252526; 322 - border-color: #454545; 323 - } 324 - [data-theme="light"] #monaco-overflow-widgets .monaco-menu { 325 - background: #ffffff; 326 - border-color: #c8c8c8; 294 + /* Editor panel gets high z-index so Monaco's context menu (rendered inside 295 + with full theme styling) appears above sibling elements (gutters, etc.) */ 296 + .editor-panel { 297 + z-index: 100; 327 298 } 328 299 329 300 /* Flush Monaco text to top-left edge in stage mode */ ··· 15663 15634 15664 15635 // LOCAL indicator removed - no longer needed 15665 15636 15666 - // Create a body-level container for Monaco overflow widgets (context menu) 15667 - // so they escape all ancestor stacking contexts (gutters, headers, etc.) 15668 - const overflowContainer = document.createElement('div'); 15669 - overflowContainer.id = 'monaco-overflow-widgets'; 15670 - document.body.appendChild(overflowContainer); 15671 - 15672 15637 // Create the editor 15673 15638 editor = monaco.editor.create(editorContainer, { 15674 - overflowWidgetsDomNode: overflowContainer, 15675 15639 value: localStorage.getItem('kidlisp-code') || '', 15676 15640 language: 'kidlisp', 15677 15641 theme: initialTheme,