Merge pull request #15 from OpenCortexIDE/investigate/linux-dropdown-menu-issue

fix: resolve Linux dropdown menu stacking context issues

Author: Pterjudin

src/vs/base/browser/ui/menu/menubar.ts

@@ -18,7 +18,7 @@ import { Emitter, Event } from '../../../common/event.js';
 import { KeyCode, KeyMod, ScanCode, ScanCodeUtils } from '../../../common/keyCodes.js';
 import { ResolvedKeybinding } from '../../../common/keybindings.js';
 import { Disposable, DisposableStore, dispose, IDisposable } from '../../../common/lifecycle.js';
-import { isMacintosh, isWindows } from '../../../common/platform.js';
+import { isLinux, isMacintosh, isWindows } from '../../../common/platform.js';
 import * as strings from '../../../common/strings.js';
 import './menubar.css';
 import * as nls from '../../../../nls.js';
@@ -1082,9 +1082,10 @@ export class MenuBar extends Disposable {
 		menuHolder.style.opacity = '1';
 		menuHolder.style.pointerEvents = 'auto';
 
-		// On Windows, append dropdown to document.body to avoid stacking context issues
+		// On Windows and Linux, append dropdown to document.body to avoid stacking context issues
 		// where the dropdown renders behind the workbench content
-		if (isWindows) {
+		// Linux experiences the same stacking context issues as Windows
+		if (isWindows || isLinux) {
 			const window = DOM.getWindow(this.container);
 			window.document.body.appendChild(menuHolder);
 		} else {

src/vs/workbench/contrib/cortexide/browser/react/src/util/inputs.tsx

@@ -4,6 +4,7 @@
  *--------------------------------------------------------------------------------------*/
 
 import React, { forwardRef, ForwardRefExoticComponent, MutableRefObject, RefAttributes, useCallback, useEffect, useId, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
 import { IInputBoxStyles, InputBox } from '../../../../../../../base/browser/ui/inputbox/inputBox.js';
 import { defaultCheckboxStyles, defaultInputBoxStyles, defaultSelectBoxStyles } from '../../../../../../../platform/theme/browser/defaultStyles.js';
 import { SelectBox } from '../../../../../../../base/browser/ui/selectBox/selectBox.js';
@@ -1497,8 +1498,8 @@ export const VoidCustomDropdownBox = <T extends NonNullable<any>>({
 				</svg>
 			</button>
 
-			{/* Dropdown Menu */}
-			{isOpen && (
+			{/* Dropdown Menu - Use portal to render to document.body to avoid stacking context issues on Linux */}
+			{isOpen && typeof document !== 'undefined' && createPortal(
 				<div
 					ref={refs.setFloating}
 					className="z-[10000] bg-void-bg-1 border-void-border-3 border rounded-lg shadow-lg"
@@ -1555,7 +1556,8 @@ export const VoidCustomDropdownBox = <T extends NonNullable<any>>({
 						})}
 					</div>
 
-				</div>
+				</div>,
+				document.body
 			)}
 		</div>
 	);