From a05ee2483b518d092b3441a29bd9168eb770ea3d Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Sat, 25 Oct 2025 03:22:51 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20adjust=20form=20style=20for=20cr?=
 =?UTF-8?q?eateblueprintform?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CreateBlueprintForm.tsx | 22 +++++++++++++---------
 src/components/Settings.tsx            | 22 ++++++++++++++++++----
 2 files changed, 31 insertions(+), 13 deletions(-)

diff --git a/src/components/CreateBlueprintForm.tsx b/src/components/CreateBlueprintForm.tsx
index 57fce664..3bb35f6f 100644
--- a/src/components/CreateBlueprintForm.tsx
+++ b/src/components/CreateBlueprintForm.tsx
@@ -69,13 +69,17 @@ export default function CreateBlueprintForm({
         ),
         defaultValues: {
             name: "",
-            contents: `proxy-resources:
-    resource-nice-id-uno:
-        name: this is my resource
-        protocol: http
-        full-domain: never-gonna-give-you-up.example.com
-        host-header: example.com
-        tls-server-name: example.com
+            contents: `# Example blueprint
+# proxy-resources:
+#     resource-nice-id-uno:
+#         name: this is my resource
+#         protocol: http
+#         full-domain: never-gonna-give-you-up.example.com
+#         targets:
+#             - site: lively-yosemite-toad
+#               hostname: localhost
+#               method: http
+#               port: 8000
 `
         }
     });
@@ -125,7 +129,7 @@ export default function CreateBlueprintForm({
                             </SettingsSectionTitle>
                         </SettingsSectionHeader>
                         <SettingsSectionBody>
-                            <SettingsSectionForm>
+                            <SettingsSectionForm className="max-w-2xl">
                                 <FormField
                                     control={form.control}
                                     name="name"
@@ -159,7 +163,7 @@ export default function CreateBlueprintForm({
                                             <FormControl>
                                                 <div
                                                     className={cn(
-                                                        "resize-y h-52 min-h-52 overflow-y-auto overflow-x-clip max-w-full"
+                                                        "resize-y h-64 min-h-64 overflow-y-auto overflow-x-clip max-w-full rounded-md"
                                                     )}
                                                 >
                                                     <Editor
diff --git a/src/components/Settings.tsx b/src/components/Settings.tsx
index 796a4bc8..78f20b0a 100644
--- a/src/components/Settings.tsx
+++ b/src/components/Settings.tsx
@@ -1,9 +1,15 @@
+import { cn } from "@app/lib/cn";
+
 export function SettingsContainer({ children }: { children: React.ReactNode }) {
     return <div className="space-y-6">{children}</div>;
 }
 
 export function SettingsSection({ children }: { children: React.ReactNode }) {
-    return <div className="border rounded-lg bg-card p-5 flex flex-col min-h-[200px]">{children}</div>;
+    return (
+        <div className="border rounded-lg bg-card p-5 flex flex-col min-h-[200px]">
+            {children}
+        </div>
+    );
 }
 
 export function SettingsSectionHeader({
@@ -15,11 +21,15 @@ export function SettingsSectionHeader({
 }
 
 export function SettingsSectionForm({
-    children
+    children,
+    className
 }: {
     children: React.ReactNode;
+    className?: string;
 }) {
-    return <div className="max-w-xl space-y-4">{children}</div>;
+    return (
+        <div className={cn("max-w-xl space-y-4", className)}>{children}</div>
+    );
 }
 
 export function SettingsSectionTitle({
@@ -55,7 +65,11 @@ export function SettingsSectionFooter({
 }: {
     children: React.ReactNode;
 }) {
-    return <div className="flex justify-end space-x-2 mt-auto pt-6">{children}</div>;
+    return (
+        <div className="flex justify-end space-x-2 mt-auto pt-6">
+            {children}
+        </div>
+    );
 }
 
 export function SettingsSectionGrid({