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,67 +45,82 @@ export const DiskStep = (props: StepProps<DiskValues>) => {
     },
   }));
 
+  const modalContext = useContext();
+
   return (
-    <Form
+    <>
-      onSubmit={handleSubmit}
+      <Form
-      class="flex flex-col gap-6"
+        onSubmit={handleSubmit}
-      noValidate={false}
+        class="flex flex-col gap-6"
-    >
+        noValidate={false}
-      <span class="flex flex-col gap-4">
+      >
-        <Field name="schema" validate={required("Schema must be provided")}>
+        <div class="max-h-[calc(100vh-20rem)] overflow-y-scroll">
-          {(field, fieldProps) => (
+          <div class="flex h-full flex-col gap-6 p-4">
-            <>
+            <span class="flex flex-col gap-4">
-              <Typography
+              <Field
-                hierarchy="body"
+                name="schema"
-                size="default"
+                validate={required("Schema must be provided")}
-                weight="bold"
-                class="capitalize"
               >
-                {(field.value || "No schema selected").split("-").join(" ")}
+                {(field, fieldProps) => (
-              </Typography>
+                  <>
-              <Typography
+                    <Typography
-                hierarchy="body"
+                      hierarchy="body"
-                size="xs"
+                      size="default"
-                weight="medium"
+                      weight="bold"
-                class="underline"
+                      class="capitalize"
+                    >
+                      {(field.value || "No schema selected")
+                        .split("-")
+                        .join(" ")}
+                    </Typography>
+                    <Typography
+                      hierarchy="body"
+                      size="xs"
+                      weight="medium"
+                      class="underline"
+                    >
+                      Change schema
+                    </Typography>
+                  </>
+                )}
+              </Field>
+            </span>
+            <Group>
+              {props.initial?.initialized &&
+                "Disk has been initialized already"}
+              <Field
+                name="placeholders.mainDisk"
+                validate={
+                  !props.initial?.initialized
+                    ? required("Disk must be provided")
+                    : undefined
+                }
               >
-                Change schema
+                {(field, fieldProps) => (
-              </Typography>
+                  <SelectInput
-            </>
+                    loading={diskSchemaQuery.isFetching}
-          )}
+                    options={
-        </Field>
+                      diskSchemaQuery.data?.["single-disk"].placeholders[
-      </span>
+                        "mainDisk"
-      <Group>
+                      ].options?.map((o) => ({ label: o, value: o })) || [
-        {props.initial?.initialized && "Disk has been initialized already"}
+                        { label: "No options", value: "" },
-        <Field
+                      ]
-          name="placeholders.mainDisk"
+                    }
-          validate={
+                    error={field.error}
-            !props.initial?.initialized
+                    label="Main Disk"
-              ? required("Disk must be provided")
+                    value={field.value || ""}
-              : undefined
+                    placeholder="Select a disk"
-          }
+                    selectProps={fieldProps}
-        >
+                    required={!props.initial?.initialized}
-          {(field, fieldProps) => (
+                    portalRef={modalContext.contentRef}
-            <SelectInput
+                  />
-              loading={diskSchemaQuery.isFetching}
+                )}
-              options={
+              </Field>
-                diskSchemaQuery.data?.["single-disk"].placeholders[
+            </Group>
-                  "mainDisk"
+          </div>
-                ].options?.map((o) => ({ label: o, value: o })) || [
+        </div>
-                  { label: "No options", value: "" },
+        {props.footer}
-                ]
+      </Form>
-              }
+    </>
-              error={field.error}
-              label="Main Disk"
-              value={field.value || ""}
-              placeholder="Select a disk"
-              selectProps={fieldProps}
-              required={!props.initial?.initialized}
-            />
-          )}
-        </Field>
-      </Group>
-      {props.footer}
-    </Form>
   );
 };