chore(react): add an option to make options row stacked

apps/client/src/widgets/type_widgets/options/components/OptionsRow.css

@@ -46,6 +46,16 @@
     justify-content: center;
 }
 
+.option-row.stacked {
+    flex-direction: column;
+    align-items: stretch;
+    gap: 8px;
+}
+
+.option-row.stacked .option-row-input {
+    width: 100%;
+}
+
 .option-row-link.use-tn-links {
     text-decoration: none;
     color: inherit;

apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx

@@ -10,14 +10,18 @@ interface OptionsRowProps {
     description?: string;
     children: VNode;
     centered?: boolean;
+    /** When true, stacks label above input with full-width input */
+    stacked?: boolean;
 }
 
-export default function OptionsRow({ name, label, description, children, centered }: OptionsRowProps) {
+export default function OptionsRow({ name, label, description, children, centered, stacked }: OptionsRowProps) {
     const id = useUniqueName(name);
     const childWithId = cloneElement(children, { id });
 
+    const className = `option-row ${centered ? "centered" : ""} ${stacked ? "stacked" : ""}`;
+
     return (
-        <div className={`option-row ${centered ? "centered" : ""}`}>
+        <div className={className}>
             <div className="option-row-label">
                 {label && <label for={id}>{label}</label>}
                 {description && <small className="option-row-description">{description}</small>}