From d1f5a8e263292107fe63a014c371c2362cd5f0d0 Mon Sep 17 00:00:00 2001
From: Johannes Kirschbauer <hsjobeki@gmail.com>
Date: Mon, 11 Aug 2025 17:00:20 +0200
Subject: [PATCH] ui/install: set fixed dimensions for modal

---
 .../ui/src/components/Modal/Modal.module.css  |  7 +++--
 .../ui/src/workflows/Install/install.tsx      |  4 +--
 .../src/workflows/Install/steps/Initial.tsx   | 16 ++++++------
 .../Install/steps/createInstaller.tsx         | 26 +++++++++----------
 .../workflows/Install/steps/installSteps.tsx  | 15 ++++++-----
 pkgs/clan-app/ui/src/workflows/Steps.tsx      |  2 +-
 6 files changed, 38 insertions(+), 32 deletions(-)

diff --git a/pkgs/clan-app/ui/src/components/Modal/Modal.module.css b/pkgs/clan-app/ui/src/components/Modal/Modal.module.css
index a2a88096f..5624aa7e0 100644
--- a/pkgs/clan-app/ui/src/components/Modal/Modal.module.css
+++ b/pkgs/clan-app/ui/src/components/Modal/Modal.module.css
@@ -1,7 +1,9 @@
 .modal_content {
-  @apply min-w-[320px] max-w-[512px];
+  @apply min-w-[320px] flex flex-col;
   @apply rounded-md overflow-hidden;
 
+  max-height: calc(100vh - 2rem);
+
   /* todo replace with a theme() color */
   box-shadow: 0.1875rem 0.1875rem 0 0 rgba(145, 172, 175, 0.32);
   @apply border border-def-3 rounded-bl-md rounded-br-md;
@@ -22,7 +24,8 @@
 }
 
 .modal_body {
-  @apply rounded-b-md p-6 pt-4 bg-def-1;
+  overflow-y: auto;
+  @apply rounded-b-md p-6 pt-4 bg-def-1 flex-grow;
 
   &[data-no-padding] {
     @apply p-0;
diff --git a/pkgs/clan-app/ui/src/workflows/Install/install.tsx b/pkgs/clan-app/ui/src/workflows/Install/install.tsx
index e7fb783f9..518199550 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/install.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/install.tsx
@@ -5,8 +5,7 @@ import {
   StepperProvider,
   useStepper,
 } from "@/src/hooks/stepper";
-import { createForm, FieldValues, SubmitHandler } from "@modular-forms/solid";
-import { onMount, Show } from "solid-js";
+import { Show } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { initialSteps } from "./steps/Initial";
 import { createInstallerSteps } from "./steps/createInstaller";
@@ -85,6 +84,7 @@ export const InstallModal = (props: InstallModalProps) => {
   return (
     <StepperProvider stepper={stepper}>
       <Modal
+        class="h-[30rem] w-screen max-w-3xl"
         mount={props.mount}
         title="Install machine"
         onClose={() => {
diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx
index 43bc7e25a..8f8354246 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/steps/Initial.tsx
@@ -12,8 +12,8 @@ const ChoiceLocalOrRemote = () => {
         <div class="flex justify-between gap-2">
           <div class="flex flex-col justify-center gap-1 px-1">
             <Typography
-              hierarchy="label"
-              size="xs"
+              hierarchy="body"
+              size="default"
               weight="bold"
               color="primary"
             >
@@ -33,8 +33,8 @@ const ChoiceLocalOrRemote = () => {
         <div class="flex justify-between gap-2">
           <div class="flex flex-col justify-center gap-1 px-1">
             <Typography
-              hierarchy="label"
-              size="xs"
+              hierarchy="body"
+              size="default"
               weight="bold"
               color="primary"
             >
@@ -64,8 +64,8 @@ const ChoiceLocalInstaller = () => {
             <div class="flex justify-between gap-2">
               <div class="flex flex-col justify-center gap-1 px-1">
                 <Typography
-                  hierarchy="label"
-                  size="xs"
+                  hierarchy="body"
+                  size="default"
                   weight="bold"
                   color="primary"
                 >
@@ -85,8 +85,8 @@ const ChoiceLocalInstaller = () => {
             <div class="flex justify-between gap-2">
               <div class="flex flex-col justify-center gap-1 px-1">
                 <Typography
-                  hierarchy="label"
-                  size="xs"
+                  hierarchy="body"
+                  size="default"
                   weight="bold"
                   color="primary"
                 >
diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
index cc78ea09a..3bae7fc1f 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/steps/createInstaller.tsx
@@ -149,7 +149,7 @@ const ConfigureImage = () => {
   let content: Node;
 
   return (
-    <Form onSubmit={handleSubmit}>
+    <Form onSubmit={handleSubmit} class="h-full">
       <StepLayout
         body={
           <div
@@ -241,7 +241,7 @@ const ChooseDisk = () => {
 
   const stripId = (s: string) => s.split("-")[1] ?? s;
   return (
-    <Form onSubmit={handleSubmit}>
+    <Form onSubmit={handleSubmit} class="h-full">
       <StepLayout
         body={
           <div class="flex flex-col gap-2">
@@ -317,7 +317,7 @@ const FlashProgress = () => {
   };
 
   return (
-    <div class="flex h-60 w-full flex-col items-center justify-end bg-inv-4">
+    <div class="flex size-full h-60 flex-col items-center justify-end bg-inv-4">
       <div class="mb-6 flex w-full max-w-md flex-col items-center gap-3 fg-inv-1">
         <Typography
           hierarchy="title"
@@ -343,7 +343,7 @@ const FlashProgress = () => {
 const FlashDone = () => {
   const stepSignal = useStepper<InstallSteps>();
   return (
-    <div class="flex w-full flex-col items-center bg-inv-4">
+    <div class="flex size-full flex-col items-center justify-between bg-inv-4">
       <div class="flex w-full max-w-md flex-col items-center gap-3 py-6 fg-inv-1">
         <div class="rounded-full bg-semantic-success-4">
           <Icon icon="Checkmark" class="size-9" />
@@ -361,15 +361,15 @@ const FlashDone = () => {
           title="Remove it and plug it into the machine that you want to install."
           description=""
         />
-        <div class="mt-3 flex w-full justify-end">
-          <Button
-            hierarchy="primary"
-            endIcon="ArrowRight"
-            onClick={() => stepSignal.next()}
-          >
-            Next
-          </Button>
-        </div>
+      </div>
+      <div class="flex w-full justify-end p-6">
+        <Button
+          hierarchy="primary"
+          endIcon="ArrowRight"
+          onClick={() => stepSignal.next()}
+        >
+          Next
+        </Button>
       </div>
     </div>
   );
diff --git a/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx b/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx
index 156e0ebeb..d413c6fe9 100644
--- a/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Install/steps/installSteps.tsx
@@ -74,7 +74,7 @@ const ConfigureAddress = () => {
   };
 
   return (
-    <Form onSubmit={handleSubmit}>
+    <Form onSubmit={handleSubmit} class="h-full">
       <StepLayout
         body={
           <div class="flex flex-col gap-2">
@@ -232,7 +232,7 @@ const ConfigureDisk = () => {
   );
 
   return (
-    <Form onSubmit={handleSubmit}>
+    <Form onSubmit={handleSubmit} class="h-full">
       <StepLayout
         body={
           <div class="flex flex-col gap-2">
@@ -367,7 +367,7 @@ const PromptsFields = (props: PromptsFieldsProps) => {
   };
 
   return (
-    <Form onSubmit={handleSubmit}>
+    <Form onSubmit={handleSubmit} class="h-full">
       <StepLayout
         body={
           <div class="flex flex-col gap-2">
@@ -563,7 +563,7 @@ const InstallProgress = () => {
   );
 
   return (
-    <div class="flex h-60 w-full flex-col items-center justify-end bg-inv-4">
+    <div class="flex size-full h-60 flex-col items-center justify-end bg-inv-4">
       <div class="mb-6 flex w-full max-w-md flex-col items-center gap-3 fg-inv-1">
         <Typography
           hierarchy="title"
@@ -617,7 +617,10 @@ const InstallProgress = () => {
   );
 };
 
-const FlashDone = () => {
+interface InstallDoneProps {
+  onDone: () => void;
+}
+const InstallDone = (props: InstallDoneProps) => {
   const stepSignal = useStepper<InstallSteps>();
   const [store, get] = getStepStore<InstallStoreType>(stepSignal);
 
@@ -687,7 +690,7 @@ export const installSteps = [
   },
   {
     id: "install:done",
-    content: FlashDone,
+    content: InstallDone,
     isSplash: true,
   },
 ] as const;
diff --git a/pkgs/clan-app/ui/src/workflows/Steps.tsx b/pkgs/clan-app/ui/src/workflows/Steps.tsx
index 986d44485..85f6da171 100644
--- a/pkgs/clan-app/ui/src/workflows/Steps.tsx
+++ b/pkgs/clan-app/ui/src/workflows/Steps.tsx
@@ -9,7 +9,7 @@ interface StepLayoutProps {
 }
 export const StepLayout = (props: StepLayoutProps) => {
   return (
-    <div class="flex flex-col gap-6">
+    <div class="flex size-full grow flex-col justify-between gap-6">
       {props.body}
       {props.footer}
     </div>