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>
This commit is contained in:
oliver 2026-08-12 16:44:55 +08:00
parent b81e5869a6
commit 984585c384

View file

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