Refine supervisor timeout setting layout

Author: pallyoung

packages/web/src/features/settings/components/settings-page.test.tsx

@@ -289,6 +289,27 @@ describe("SettingsPage", () => {
     });
   });
 
+  it("renders the supervisor timeout control as an inline settings row", async () => {
+    const sendCommand = vi.fn().mockImplementation(async (op: string) => {
+      if (op === "settings.get") {
+        return {
+          "supervisor.evaluationTimeoutSec": 600,
+        };
+      }
+      return {};
+    });
+    const store = createConnectedStore(sendCommand);
+
+    renderSettingsPage(store);
+
+    const input = await screen.findByLabelText("Supervisor 超时（秒）");
+    const field = input.closest(".settings-config-field");
+    const control = input.closest(".settings-config-control");
+
+    expect(field).toHaveClass("settings-config-field--inline");
+    expect(control).not.toBeNull();
+  });
+
   it("does not save supervisor timeout for non-integer numeric strings", async () => {
     const sendCommand = vi.fn().mockImplementation(async (op: string) => {
       if (op === "settings.get") {

packages/web/src/features/settings/components/settings-page.tsx

@@ -640,36 +640,38 @@ function GeneralSettings({
         <h3 className="settings-group-title">{t("settings.supervisor.title")}</h3>
         <p className="settings-group-desc">{t("settings.supervisor.hint")}</p>
 
-        <div className="settings-config-field">
+        <div className="settings-config-field settings-config-field--inline">
           <label className="settings-config-label" htmlFor="supervisor-evaluation-timeout">
             {t("settings.supervisor.evaluation_timeout")}
           </label>
-          <input
-            id="supervisor-evaluation-timeout"
-            className="input"
-            type="number"
-            min={1}
-            max={MAX_SUPERVISOR_EVALUATION_TIMEOUT_SEC}
-            step={1}
-            inputMode="numeric"
-            aria-invalid={supervisorTimeoutError ? "true" : "false"}
-            value={supervisorTimeoutDraft}
-            onChange={(event) => {
-              setSupervisorTimeoutDraft(event.target.value);
-              if (supervisorTimeoutError) {
-                setSupervisorTimeoutError(null);
-              }
-            }}
-            onBlur={() => {
-              void commitSupervisorTimeout();
-            }}
-            onKeyDown={(event) => {
-              if (event.key === "Enter") {
-                event.preventDefault();
+          <div className="settings-config-control">
+            <input
+              id="supervisor-evaluation-timeout"
+              className="input settings-input-compact"
+              type="number"
+              min={1}
+              max={MAX_SUPERVISOR_EVALUATION_TIMEOUT_SEC}
+              step={1}
+              inputMode="numeric"
+              aria-invalid={supervisorTimeoutError ? "true" : "false"}
+              value={supervisorTimeoutDraft}
+              onChange={(event) => {
+                setSupervisorTimeoutDraft(event.target.value);
+                if (supervisorTimeoutError) {
+                  setSupervisorTimeoutError(null);
+                }
+              }}
+              onBlur={() => {
                 void commitSupervisorTimeout();
-              }
-            }}
-          />
+              }}
+              onKeyDown={(event) => {
+                if (event.key === "Enter") {
+                  event.preventDefault();
+                  void commitSupervisorTimeout();
+                }
+              }}
+            />
+          </div>
           {supervisorTimeoutError ? (
             <span className="form-error" role="alert">
               {supervisorTimeoutError}

packages/web/src/styles/components.css

@@ -954,13 +954,35 @@
   width: 100%;
 }
 
+.settings-config-field--inline {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  gap: var(--sp-3);
+}
+
 .settings-config-label {
   display: block;
   font-size: var(--text-sm);
   color: var(--text-secondary);
   margin-bottom: var(--sp-2);
 }
 
+.settings-config-field--inline .settings-config-label {
+  margin-bottom: 0;
+}
+
+.settings-config-control {
+  display: flex;
+  justify-content: flex-end;
+  min-width: 0;
+}
+
+.settings-input-compact {
+  width: min(160px, 100%);
+  text-align: right;
+}
+
 .settings-provider-args-input {
   display: block;
   width: 100%;

packages/web/src/styles/components.theme.test.ts

@@ -293,4 +293,18 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(ctrlLocked).toContain("var(--accent-blue)");
     expect(shiftArmed).toContain("var(--accent-blue)");
   });
+
+  it("keeps the supervisor timeout setting aligned as a label-left control-right row", () => {
+    const inlineField = getLastRuleBlock(".settings-config-field--inline");
+    const inlineLabel = getLastRuleBlock(".settings-config-field--inline .settings-config-label");
+    const control = getLastRuleBlock(".settings-config-control");
+    const compactInput = getLastRuleBlock(".settings-input-compact");
+
+    expect(inlineField).toContain("display: grid");
+    expect(inlineField).toContain("grid-template-columns: minmax(0, 1fr) auto");
+    expect(inlineField).toContain("align-items: center");
+    expect(inlineLabel).toContain("margin-bottom: 0");
+    expect(control).toContain("justify-content: flex-end");
+    expect(compactInput).toContain("text-align: right");
+  });
 });