diff --git a/frontend/src/components/simulator/CircuitVerificationModal.tsx b/frontend/src/components/simulator/CircuitVerificationModal.tsx index fb5e7402..3deddafb 100644 --- a/frontend/src/components/simulator/CircuitVerificationModal.tsx +++ b/frontend/src/components/simulator/CircuitVerificationModal.tsx @@ -9,6 +9,7 @@ * The component is dumb: it just renders the verification result it's * given. The caller (EditorToolbar) decides when to show it. */ +import { createPortal } from 'react-dom'; import type { CircuitWarning, VerificationResult } from '../../simulation/verify/circuitVerifier'; interface Props { @@ -24,7 +25,9 @@ const SEVERITY_COPY: Record = ({ result, onCancel, onRunAnyway }) => { const items: CircuitWarning[] = [...result.errors, ...result.warnings]; - return ( + // Portaled to : see LibraryManagerModal - the toolbar's + // container-type would otherwise shrink this fixed overlay. + return createPortal(
e.stopPropagation()}>

Circuit verification

@@ -62,7 +65,8 @@ export const CircuitVerificationModal: React.FC = ({ result, onCancel, on
- + , + document.body, ); }; diff --git a/frontend/src/components/simulator/InstallLibrariesModal.tsx b/frontend/src/components/simulator/InstallLibrariesModal.tsx index d8c82070..dcd7b318 100644 --- a/frontend/src/components/simulator/InstallLibrariesModal.tsx +++ b/frontend/src/components/simulator/InstallLibrariesModal.tsx @@ -1,4 +1,5 @@ import React, { useState, useCallback } from 'react'; +import { createPortal } from 'react-dom'; import { useTranslation } from 'react-i18next'; import { installLibrary } from '../../services/libraryService'; import { useSimulatorStore } from '../../store/useSimulatorStore'; @@ -129,7 +130,10 @@ export const InstallLibrariesModal: React.FC = ({ const installedCount = items.filter((i) => i.status === 'done').length; const allDone = items.length > 0 && pendingCount === 0 && !running; - return ( + // Portaled to : the toolbar ancestor has container-type + // (container queries), which turns it into the containing block for + // position:fixed and shrank the overlay to the toolbar's box. + return createPortal(
e.stopPropagation()}> {/* Header */} @@ -280,6 +284,7 @@ export const InstallLibrariesModal: React.FC = ({ )}
- + , + document.body, ); }; diff --git a/frontend/src/components/simulator/LibraryManagerModal.css b/frontend/src/components/simulator/LibraryManagerModal.css index 5737db89..e88db751 100644 --- a/frontend/src/components/simulator/LibraryManagerModal.css +++ b/frontend/src/components/simulator/LibraryManagerModal.css @@ -28,7 +28,10 @@ border-radius: 8px; width: 680px; max-width: 95vw; - max-height: 80vh; + /* Fixed tall height (not just a cap): the list is the modal's whole + point, so give it the room instead of jumping sizes per search. */ + height: min(86vh, 1000px); + max-height: 92vh; display: flex; flex-direction: column; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6); diff --git a/frontend/src/components/simulator/LibraryManagerModal.tsx b/frontend/src/components/simulator/LibraryManagerModal.tsx index 97df229b..14c3adf6 100644 --- a/frontend/src/components/simulator/LibraryManagerModal.tsx +++ b/frontend/src/components/simulator/LibraryManagerModal.tsx @@ -1,4 +1,5 @@ import React, { useState, useEffect, useCallback, useRef, useMemo } from 'react'; +import { createPortal } from 'react-dom'; import { useTranslation } from 'react-i18next'; import { searchLibraries, @@ -279,7 +280,10 @@ export const LibraryManagerModal: React.FC = ({ isOpen if (!isOpen) return null; const browsing = !searchQuery.trim(); - return ( + // Portaled to : the toolbar ancestor has container-type + // (container queries), which turns it into the containing block for + // position:fixed and shrank the overlay to the toolbar's box. + return createPortal(
e.stopPropagation()}> {/* Header — the pro custom-upload button injects into .lib-modal-header */} @@ -459,6 +463,7 @@ export const LibraryManagerModal: React.FC = ({ isOpen
- + , + document.body, ); };