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 ( -
+
{label && } {description && {description}}