fix(ui): alignment issues with forms

pkgs/clan-app/ui/src/components/Form/Fieldset.stories.tsx

@@ -9,6 +9,7 @@ import { TextInput } from "@/src/components/Form/TextInput";
 import { TextArea } from "@/src/components/Form/TextArea";
 import { Checkbox } from "@/src/components/Form/Checkbox";
 import { FieldProps } from "./Field";
+import { HostFileInput } from "@/src/components/Form/HostFileInput";
 
 const FieldsetExamples = (props: FieldsetProps) => (
   <div class="flex flex-col gap-8">
@@ -26,7 +27,7 @@ const meta = {
         <div
           class={cx({
             "w-[600px]": (context.args.orientation || "vertical") == "vertical",
-            "w-[1024px]": context.args.orientation == "horizontal",
+            "w-[512px]": context.args.orientation == "horizontal",
             "bg-inv-acc-3": context.args.inverted,
           })}
         >
@@ -63,6 +64,11 @@ export const Default: Story = {
           label="Bio"
           input={{ placeholder: "Tell us a bit about yourself", rows: 8 }}
         />
+        <HostFileInput
+          {...props}
+          label="Profile pic"
+          onSelectFile={async () => "/home/foo/bar/baz/fizz/buzz/bla/bizz"}
+        />
         <Checkbox {...props} label="Accept Terms" required={true} />
       </>
     ),

pkgs/clan-app/ui/src/components/Form/HostFileInput.css

@@ -1,5 +1,11 @@
 div.form-field.host-file {
   button {
-    @apply w-1/2;
+    @apply w-fit;
+  }
+
+  &.horizontal {
+    button {
+      @apply grow max-w-[18rem];
+    }
   }
 }

pkgs/clan-app/ui/src/components/Form/HostFileInput.tsx

@@ -47,7 +47,10 @@ export const HostFileInput = (props: HostFileInputProps) => {
       })}
       {...props}
     >
-      <Orienter orientation={props.orientation} align={"start"}>
+      <Orienter
+        orientation={props.orientation}
+        align={props.orientation == "horizontal" ? "center" : "start"}
+      >
         <Label
           labelComponent={TextField.Label}
           descriptionComponent={TextField.Description}

pkgs/clan-app/ui/src/components/Form/Orienter.css

@@ -5,7 +5,7 @@ div.orienter {
   }
 
   &.horizontal {
-    @apply flex-row justify-start;
+    @apply flex-row justify-between gap-0;
 
     & > div.form-label {
       @apply w-1/2 shrink;

pkgs/clan-app/ui/src/routes/Onboarding/Onboarding.css

@@ -54,8 +54,7 @@ main#welcome {
   }
 
   & > div.container {
-    @apply flex flex-col items-center justify-evenly gap-y-20;
-    @apply size-fit;
+    @apply flex flex-col items-center justify-evenly gap-y-20 size-fit;
 
     & > div.welcome {
       @apply flex flex-col min-w-80 gap-y-6;
@@ -66,7 +65,7 @@ main#welcome {
     }
 
     & > div.setup {
-      @apply flex flex-col min-w-[520px] gap-y-5;
+      @apply flex flex-col w-[33rem] gap-y-5;
       @apply pt-10 px-8 pb-8 bg-def-1 rounded-lg;
 
       & > div.header {