cleanup some styles etc

frontend/src/components/config/util.tsx

@@ -98,7 +98,7 @@ export const DoubleInput = <
   onRemove: (i: number) => void;
 }) => {
   return (
-    <div className="flex flex-col gap-4 border-b pb-4">
+    <div className="flex flex-col gap-4">
       {values?.map((value, i) => (
         <div className="flex items-center justify-between gap-4" key={i}>
           <Input
@@ -124,7 +124,7 @@ export const DoubleInput = <
       <Button
         variant="outline"
         intent="success"
-        className="flex items-center gap-2"
+        className="flex items-center gap-2 w-[200px] place-self-end"
         onClick={onAdd}
       >
         <PlusCircle className="w-4 h-4" />

frontend/src/resources/deployment/config/components/extra-args.tsx

@@ -2,7 +2,7 @@ import { ConfigItem } from "@components/config/util";
 import { DeploymentConfig } from "@monitor/client/dist/types";
 import { Button } from "@ui/button";
 import { Input } from "@ui/input";
-import { MinusCircle } from "lucide-react";
+import { MinusCircle, PlusCircle } from "lucide-react";
 
 export const ExtraArgs = ({
   args,
@@ -39,9 +39,10 @@ export const ExtraArgs = ({
         <Button
           variant="outline"
           intent="success"
+          className="flex items-center gap-2 w-[200px] place-self-end"
           onClick={() => set({ extra_args: [...args, ""] })}
         >
-          Add Extra Arg
+          <PlusCircle className="w-4 h-4" /> Add Extra Arg
         </Button>
       </div>
     </ConfigItem>

frontend/src/resources/deployment/config/components/ports.tsx

@@ -1,4 +1,4 @@
-import { DoubleInput } from "@components/config/util";
+import { ConfigItem, DoubleInput } from "@components/config/util";
 import { Types } from "@monitor/client";
 
 export const PortsConfig = ({
@@ -8,24 +8,26 @@ export const PortsConfig = ({
   ports: Types.Conversion[];
   set: (input: Partial<Types.DeploymentConfig>) => void;
 }) => (
-  <DoubleInput
-    values={ports}
-    leftval="local"
-    leftpl="Local"
-    rightval="container"
-    rightpl="Container"
-    addName="Port"
-    onLeftChange={(local, i) => {
-      ports[i].local = local;
-      set({ ports: [...ports] });
-    }}
-    onRightChange={(container, i) => {
-      ports[i].container = container;
-      set({ ports: [...ports] });
-    }}
-    onAdd={() =>
-      set({ ports: [...(ports ?? []), { container: "", local: "" }] })
-    }
-    onRemove={(idx) => set({ ports: [...ports.filter((_, i) => i !== idx)] })}
-  />
+  <ConfigItem label="Ports" className="items-start">
+    <DoubleInput
+      values={ports}
+      leftval="local"
+      leftpl="Local"
+      rightval="container"
+      rightpl="Container"
+      addName="Port"
+      onLeftChange={(local, i) => {
+        ports[i].local = local;
+        set({ ports: [...ports] });
+      }}
+      onRightChange={(container, i) => {
+        ports[i].container = container;
+        set({ ports: [...ports] });
+      }}
+      onAdd={() =>
+        set({ ports: [...(ports ?? []), { container: "", local: "" }] })
+      }
+      onRemove={(idx) => set({ ports: [...ports.filter((_, i) => i !== idx)] })}
+    />
+  </ConfigItem>
 );

frontend/src/resources/deployment/config/components/volumes.tsx

@@ -1,4 +1,4 @@
-import { DoubleInput } from "@components/config/util";
+import { ConfigItem, DoubleInput } from "@components/config/util";
 import { Types } from "@monitor/client";
 
 export const VolumesConfig = ({
@@ -8,26 +8,28 @@ export const VolumesConfig = ({
   volumes: Types.Conversion[];
   set: (input: Partial<Types.DeploymentConfig>) => void;
 }) => (
-  <DoubleInput
-    values={volumes}
-    leftval="local"
-    leftpl="Local"
-    rightval="container"
-    rightpl="Container"
-    addName="Volume"
-    onLeftChange={(local, i) => {
-      volumes[i].local = local;
-      set({ volumes: [...volumes] });
-    }}
-    onRightChange={(container, i) => {
-      volumes[i].container = container;
-      set({ volumes: [...volumes] });
-    }}
-    onAdd={() =>
-      set({ volumes: [...(volumes ?? []), { container: "", local: "" }] })
-    }
-    onRemove={(idx) =>
-      set({ volumes: [...volumes.filter((_, i) => i !== idx)] })
-    }
-  />
+  <ConfigItem label="Volumes" className="items-start">
+    <DoubleInput
+      values={volumes}
+      leftval="local"
+      leftpl="Local"
+      rightval="container"
+      rightpl="Container"
+      addName="Volume"
+      onLeftChange={(local, i) => {
+        volumes[i].local = local;
+        set({ volumes: [...volumes] });
+      }}
+      onRightChange={(container, i) => {
+        volumes[i].container = container;
+        set({ volumes: [...volumes] });
+      }}
+      onAdd={() =>
+        set({ volumes: [...(volumes ?? []), { container: "", local: "" }] })
+      }
+      onRemove={(idx) =>
+        set({ volumes: [...volumes.filter((_, i) => i !== idx)] })
+      }
+    />
+  </ConfigItem>
 );

frontend/src/resources/deployment/config/index.tsx

@@ -79,8 +79,6 @@ export const DeploymentConfig = ({ id }: { id: string }) => {
               onChange={(process_args) => set({ process_args })}
             />
           ),
-        },
-        network: {
           network: (value, set) => (
             <NetworkModeSelector
               selected={value}
@@ -89,14 +87,12 @@ export const DeploymentConfig = ({ id }: { id: string }) => {
           ),
           ports: (value, set) =>
             show_ports && <PortsConfig ports={value ?? []} set={set} />,
+          volumes: (v, set) => <VolumesConfig volumes={v ?? []} set={set} />,
         },
         environment: {
           skip_secret_interp: true,
           environment: (vars, set) => <EnvVars vars={vars ?? []} set={set} />,
         },
-        volumes: {
-          volumes: (v, set) => <VolumesConfig volumes={v ?? []} set={set} />,
-        },
       }}
     />
   );