fix(FN-695): portalize QuickEntryBox model selection modal to fix z-index clipping
- Render ModelSelectionModal via createPortal to document.body so it is no longer clipped behind the board on mobile - Add SSR guard (typeof document check) around the portal call - Update QuickEntryBox test to assert the modal is portaled outside the component container - Add changeset for the patch fix
This commit is contained in:
@@ -1,4 +1,5 @@
|
||||
import { useState, useCallback, useRef, useEffect } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import type { ToastType } from "../hooks/useToast";
|
||||
import type { Task, TaskCreateInput } from "@fusion/core";
|
||||
import type { ModelInfo, RefinementType } from "../api";
|
||||
@@ -648,18 +649,23 @@ export function QuickEntryBox({ onCreate, addToast, tasks = [], availableModels,
|
||||
</div>
|
||||
)}
|
||||
|
||||
<ModelSelectionModal
|
||||
isOpen={isModelModalOpen}
|
||||
onClose={() => setIsModelModalOpen(false)}
|
||||
models={loadedModels}
|
||||
executorValue={executorSelectionValue}
|
||||
validatorValue={validatorSelectionValue}
|
||||
onExecutorChange={handleExecutorChange}
|
||||
onValidatorChange={handleValidatorChange}
|
||||
modelsLoading={modelsLoading}
|
||||
modelsError={modelsError}
|
||||
onRetry={loadModels}
|
||||
/>
|
||||
{typeof document !== "undefined"
|
||||
? createPortal(
|
||||
<ModelSelectionModal
|
||||
isOpen={isModelModalOpen}
|
||||
onClose={() => setIsModelModalOpen(false)}
|
||||
models={loadedModels}
|
||||
executorValue={executorSelectionValue}
|
||||
validatorValue={validatorSelectionValue}
|
||||
onExecutorChange={handleExecutorChange}
|
||||
onValidatorChange={handleValidatorChange}
|
||||
modelsLoading={modelsLoading}
|
||||
modelsError={modelsError}
|
||||
onRetry={loadModels}
|
||||
/>,
|
||||
document.body,
|
||||
)
|
||||
: null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user