Fix: select add portalRef instead of modalContextId

pkgs/webview-ui/app/src/Form/fields/Select.tsx

@@ -5,6 +5,7 @@ import {
   type JSX,
   For,
   createMemo,
+  Accessor,
 } from "solid-js";
 import { Portal } from "solid-js/web";
 import { useFloating } from "../base";
@@ -46,11 +47,12 @@ interface SelectInputpProps {
   placeholder?: string;
   multiple?: boolean;
   loading?: boolean;
-  dialogContextId?: string;
+  portalRef?: Accessor<HTMLElement | null>;
 }
 
 export function SelectInput(props: SelectInputpProps) {
-  const dialogContext = useContext(props.dialogContextId);
+  const dialogContext = (dialogContextId?: string) =>
+    useContext(dialogContextId);
 
   const _id = createUniqueId();
 
@@ -228,7 +230,11 @@ export function SelectInput(props: SelectInputpProps) {
         }
       />
 
-      <Portal mount={dialogContext.contentRef?.() || document.body}>
+      <Portal
+        mount={
+          props.portalRef ? props.portalRef() || document.body : document.body
+        }
+      >
         <div
           id={_id}
           popover

pkgs/webview-ui/app/src/routes/machines/install/disk-step.tsx

@@ -11,6 +11,7 @@ import { StepProps } from "./hardware-step";
 import { SelectInput } from "@/src/Form/fields/Select";
 import { Typography } from "@/src/components/Typography";
 import { Group } from "@/src/components/group";
+import { useContext } from "corvu/dialog";
 
 export interface DiskValues extends FieldValues {
   placeholders: {
@@ -44,14 +45,22 @@ export const DiskStep = (props: StepProps<DiskValues>) => {
     },
   }));
 
+  const modalContext = useContext();
+
   return (
+    <>
       <Form
         onSubmit={handleSubmit}
         class="flex flex-col gap-6"
         noValidate={false}
       >
+        <div class="max-h-[calc(100vh-20rem)] overflow-y-scroll">
+          <div class="flex h-full flex-col gap-6 p-4">
             <span class="flex flex-col gap-4">
-        <Field name="schema" validate={required("Schema must be provided")}>
+              <Field
+                name="schema"
+                validate={required("Schema must be provided")}
+              >
                 {(field, fieldProps) => (
                   <>
                     <Typography
@@ -60,7 +69,9 @@ export const DiskStep = (props: StepProps<DiskValues>) => {
                       weight="bold"
                       class="capitalize"
                     >
-                {(field.value || "No schema selected").split("-").join(" ")}
+                      {(field.value || "No schema selected")
+                        .split("-")
+                        .join(" ")}
                     </Typography>
                     <Typography
                       hierarchy="body"
@@ -75,7 +86,8 @@ export const DiskStep = (props: StepProps<DiskValues>) => {
               </Field>
             </span>
             <Group>
-        {props.initial?.initialized && "Disk has been initialized already"}
+              {props.initial?.initialized &&
+                "Disk has been initialized already"}
               <Field
                 name="placeholders.mainDisk"
                 validate={
@@ -100,11 +112,15 @@ export const DiskStep = (props: StepProps<DiskValues>) => {
                     placeholder="Select a disk"
                     selectProps={fieldProps}
                     required={!props.initial?.initialized}
+                    portalRef={modalContext.contentRef}
                   />
                 )}
               </Field>
             </Group>
+          </div>
+        </div>
         {props.footer}
       </Form>
+    </>
   );
 };