swarm-ui: FieldGrid lays out a row of form fields on one grid for the forms that each hand-rolled it

Classifier settings, the try-out target row and classification rows, and the
schedule cadence each wrote their own flex row with its own flex basis and
gap. FieldGrid is one grid with equal columns and one gap, FieldGridFull
spans a row, and the four forms use it, so a lone last field keeps its column
width and the columns share their edges in every row.

frontend/packages/swarm-ui/src/ui/field-grid/FieldGrid.css

@@ -0,0 +1,8 @@
+.ui-field-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(var(--ui-field-min), 1fr));
+  gap: 0.75em;
+}
+.ui-field-grid-full {
+  grid-column: 1 / -1;
+}

frontend/packages/swarm-ui/src/ui/field-grid/FieldGrid.tsx

@@ -0,0 +1,30 @@
+// <FieldGrid> — a row or block of form fields on one grid: every field is the
+// same width and the columns have the same edges in every row, so a field's
+// width depends on the container and not on the siblings it wraps with. The
+// columns are as many as fit `min` wide; a lone last field keeps its column
+// width instead of stretching across the form. One gap, the same in every form.
+// A field that needs a whole row (a URL, a model name) goes in `FieldGridFull`.
+import type { ComponentChildren } from "preact";
+import "./FieldGrid.css";
+
+export function FieldGrid({
+  min = "14em",
+  class: extraClass,
+  children,
+}: {
+  /** The narrowest a column gets, any CSS length. */
+  min?: string;
+  class?: string;
+  children: ComponentChildren;
+}) {
+  const classes = ["ui-field-grid", extraClass].filter(Boolean).join(" ");
+  return (
+    <div class={classes} style={{ "--ui-field-min": min }}>
+      {children}
+    </div>
+  );
+}
+
+export function FieldGridFull({ children }: { children: ComponentChildren }) {
+  return <div class="ui-field-grid-full">{children}</div>;
+}