imporve config styling

frontend/src/components/config/util.tsx

@@ -23,7 +23,7 @@ import {
   DialogTrigger,
 } from "@ui/dialog";
 import { snake_case_to_upper_space_case } from "@lib/formatting";
-import { ConfirmButton } from "@components/util";
+import { ConfirmButton, TextUpdateMenu } from "@components/util";
 
 export const ConfigItem = ({
   label,
@@ -34,15 +34,18 @@ export const ConfigItem = ({
   children: ReactNode;
   className?: string;
 }) => (
-  <div
-    className={cn(
-      "flex justify-between items-center border-b pb-2 min-h-[60px] last:border-none last:pb-0",
-      className
-    )}
-  >
-    {label && <div>{snake_case_to_upper_space_case(label)}</div>}
-    {children}
-  </div>
+  <>
+    <div
+      className={cn(
+        "flex justify-between items-center min-h-[60px]",
+        className
+      )}
+    >
+      {label && <div>{snake_case_to_upper_space_case(label)}</div>}
+      {children}
+    </div>
+    <div className="w-full h-0 border-b last:hidden" />
+  </>
 );
 
 export const ConfigInput = ({
@@ -319,27 +322,23 @@ export const SystemCommand = ({
 }) => {
   return (
     <ConfigItem label={label} className="items-start">
-      <div className="grid gap-2">
-        <div className="flex gap-4 items-center justify-end">
-          Path:
-          <Input
-            placeholder="command working directory"
-            value={value?.path}
-            className="w-[300px]"
-            onChange={(e) => set({ ...(value || {}), path: e.target.value })}
-            disabled={disabled}
-          />
-        </div>
-        <div className="flex gap-4 items-center justify-end">
-          Command:
-          <Input
-            placeholder="shell command"
-            value={value?.command}
-            className="w-[300px]"
-            onChange={(e) => set({ ...(value || {}), command: e.target.value })}
-            disabled={disabled}
-          />
-        </div>
+      <div className="grid gap-4 grid-cols-[auto_1fr] grid-rows-1 items-center">
+        Path:
+        <Input
+          placeholder="Command working directory"
+          value={value?.path}
+          className="w-full"
+          onChange={(e) => set({ ...(value || {}), path: e.target.value })}
+          disabled={disabled}
+        />
+        Command:
+        <TextUpdateMenu
+          title="Update Command"
+          placeholder="Set shell command"
+          value={value?.command}
+          onUpdate={(command) => set({ ...(value || {}), command })}
+          triggerClassName="w-[300px]"
+        />
       </div>
     </ConfigItem>
   );

frontend/src/components/resources/common.tsx

@@ -325,3 +325,22 @@ export const CopyGithubWebhook = ({
     </div>
   );
 };
+
+export const ServerSelector = ({
+  selected,
+  set,
+  disabled,
+}: {
+  selected: string | undefined;
+  set: (input: Partial<Types.DeploymentConfig>) => void;
+  disabled: boolean;
+}) => (
+  <ConfigItem label="Server">
+    <ResourceSelector
+      type="Server"
+      selected={selected}
+      onSelect={(server_id) => set({ server_id })}
+      disabled={disabled}
+    />
+  </ConfigItem>
+);

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

@@ -15,28 +15,9 @@ import {
   TermSignalLabels,
   TerminationTimeout,
 } from "./components/term-signal";
-import { LabelsConfig, ResourceSelector } from "@components/resources/common";
+import { LabelsConfig, ServerSelector } from "@components/resources/common";
 import { TextUpdateMenu } from "@components/util";
 
-export const ServerSelector = ({
-  selected,
-  set,
-  disabled,
-}: {
-  selected: string | undefined;
-  set: (input: Partial<Types.DeploymentConfig>) => void;
-  disabled: boolean;
-}) => (
-  <ConfigItem label="Server">
-    <ResourceSelector
-      type="Server"
-      selected={selected}
-      onSelect={(server_id) => set({ server_id })}
-      disabled={disabled}
-    />
-  </ConfigItem>
-);
-
 export const DeploymentConfig = ({ id }: { id: string }) => {
   const perms = useRead("GetPermissionLevel", {
     target: { type: "Deployment", id },
@@ -97,17 +78,6 @@ export const DeploymentConfig = ({ id }: { id: string }) => {
                 disabled={disabled}
               />
             ),
-            command: (value, set) => (
-              <ConfigItem label="Command">
-                <TextUpdateMenu
-                  title="Update Command"
-                  placeholder="Set Command"
-                  value={value}
-                  onUpdate={(command) => set({ command })}
-                  triggerClassName="min-w-[300px] max-w-[400px]"
-                />
-              </ConfigItem>
-            ),
             network: (value, set) => (
               <NetworkModeSelector
                 server_id={update.server_id ?? config.server_id}
@@ -133,6 +103,17 @@ export const DeploymentConfig = ({ id }: { id: string }) => {
             extra_args: (value, set) => (
               <ExtraArgs args={value ?? []} set={set} disabled={disabled} />
             ),
+            command: (value, set) => (
+              <ConfigItem label="Command">
+                <TextUpdateMenu
+                  title="Update Command"
+                  placeholder="Set custom command"
+                  value={value}
+                  onUpdate={(command) => set({ command })}
+                  triggerClassName="min-w-[300px] max-w-[400px]"
+                />
+              </ConfigItem>
+            ),
           },
           settings: {
             send_alerts: true,

frontend/src/components/resources/repo/config.tsx

@@ -10,7 +10,7 @@ import {
   SelectValue,
 } from "@ui/select";
 import { useState } from "react";
-import { CopyGithubWebhook, ResourceSelector } from "../common";
+import { CopyGithubWebhook, ServerSelector } from "../common";
 
 export const RepoConfig = ({ id }: { id: string }) => {
   const perms = useRead("GetPermissionLevel", {
@@ -34,16 +34,12 @@ export const RepoConfig = ({ id }: { id: string }) => {
       }}
       components={{
         general: {
-          general: {
-            server_id: (selected, set) => (
-              <ConfigItem label="Server">
-                <ResourceSelector
-                  type="Server"
-                  selected={selected}
-                  onSelect={(server_id) => set({ server_id })}
-                />
-              </ConfigItem>
+          "": {
+            server_id: (value, set) => (
+              <ServerSelector selected={value} set={set} disabled={disabled} />
             ),
+          },
+          general: {
             repo: true,
             branch: true,
             github_account: (value, set) => {