💄 adjust form style for createblueprintform

src/components/CreateBlueprintForm.tsx

@@ -69,13 +69,17 @@ export default function CreateBlueprintForm({
         ),
         defaultValues: {
             name: "",
-            contents: `proxy-resources:
+            contents: `# Example blueprint
-    resource-nice-id-uno:
+# proxy-resources:
-        name: this is my resource
+#     resource-nice-id-uno:
-        protocol: http
+#         name: this is my resource
-        full-domain: never-gonna-give-you-up.example.com
+#         protocol: http
-        host-header: example.com
+#         full-domain: never-gonna-give-you-up.example.com
-        tls-server-name: 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

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({