From 0696f7724de0c6e8a94de75df77ecf7af0ee71bd Mon Sep 17 00:00:00 2001
From: Elian Doran <contact@eliandoran.me>
Date: Sat, 11 Apr 2026 13:43:10 +0300
Subject: [PATCH] chore(react): add an option to make options row stacked

---
 .../type_widgets/options/components/OptionsRow.css     | 10 ++++++++++
 .../type_widgets/options/components/OptionsRow.tsx     |  8 ++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css
index c565d54f47..026824f589 100644
--- a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.css
+++ b/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;
diff --git a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx b/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
index d72ba77d04..0ff8b737b0 100644
--- a/apps/client/src/widgets/type_widgets/options/components/OptionsRow.tsx
+++ b/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>}