From 984585c3840039a0954296aa44a6b9d5c404c54a Mon Sep 17 00:00:00 2001
From: oliver <zhoutianjun127@126.com>
Date: Wed, 12 Aug 2026 16:44:55 +0800
Subject: [PATCH] Fix collect policy commands field overflowing the viewport.

Use the stacked form-grid layout instead of the nowrap policy-field flex row so the long label/hint no longer pushes the textarea aside.

Co-authored-by: Cursor <cursoragent@cursor.com>
---
 web/src/pages/CollectPage.tsx | 28 ++++++++++++++--------------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/web/src/pages/CollectPage.tsx b/web/src/pages/CollectPage.tsx
index 6be874e..4653a29 100644
--- a/web/src/pages/CollectPage.tsx
+++ b/web/src/pages/CollectPage.tsx
@@ -610,27 +610,27 @@ export function CollectPage() {
           </button>
         </div>
 
-        <div className="filter-inline" style={{ marginTop: 12 }}>
-          <label className="config-sync-policy-field" style={{ flex: 1 }}>
-            <span>{t("collect.form.jobTitle")}</span>
+        <div className="form-grid form-grid--single" style={{ marginTop: 12 }}>
+          <label className="form-grid__full">
+            {t("collect.form.jobTitle")}
             <input
               value={policyTitle}
               placeholder={t("collect.form.jobTitlePh")}
               onChange={(e) => setPolicyTitle(e.target.value)}
             />
           </label>
+          <label className="form-grid__full">
+            {t("collect.form.commands")}
+            <textarea
+              className="collect-commands"
+              rows={5}
+              value={policyCommands}
+              placeholder={t("collect.form.commandsPh")}
+              onChange={(e) => setPolicyCommands(e.target.value)}
+            />
+          </label>
         </div>
-        <label className="config-sync-policy-field" style={{ display: "block", marginTop: 12 }}>
-          <span>{t("collect.form.commands")}</span>
-          <textarea
-            rows={5}
-            value={policyCommands}
-            placeholder={t("collect.form.commandsPh")}
-            onChange={(e) => setPolicyCommands(e.target.value)}
-            style={{ width: "100%", fontFamily: "var(--font-mono, monospace)" }}
-          />
-          <span className="muted">{t("collect.form.commandsHint")}</span>
-        </label>
+        <p className="panel__hint">{t("collect.form.commandsHint")}</p>
 
         {policyScopeMode === "selected" ? (
           <div style={{ marginTop: 12 }}>