feat(options): improve alignment of option rows

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

@@ -1,27 +1,33 @@
 .option-row {
     border-bottom: 1px solid var(--main-border-color);
-    display: flex;
-    flex-direction: column;
-    padding: 0.5em 0;
-}
-
-.option-row-main {
     display: flex;
     align-items: center;
+    justify-content: space-between;
+    gap: 1rem;
+    padding: 0.75em 0;
 }
 
-.option-row-main > label {
-    width: 45%;
+.option-row-label {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+}
+
+.option-row-label > label {
     margin-bottom: 0 !important;
+}
+
+.option-row-input {
     flex-shrink: 0;
 }
 
-.option-row-main > select,
-.option-row-main > .dropdown {
-    width: 60%;
+.option-row-input > select,
+.option-row-input > .dropdown {
+    width: auto;
+    min-width: 150px;
 }
 
-.option-row-main > .dropdown button {
+.option-row-input > .dropdown button {
     width: 100%;
     text-align: start;
 }
@@ -36,6 +42,6 @@
     border-bottom: unset;
 }
 
-.option-row.centered .option-row-main {
+.option-row.centered {
     justify-content: center;
 }

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

@@ -16,11 +16,13 @@ export default function OptionsRow({ name, label, description, children, centere
 
     return (
         <div className={`option-row ${centered ? "centered" : ""}`}>
-            <div className="option-row-main">
+            <div className="option-row-label">
                 {label && <label for={id}>{label}</label>}
+                {description && <small className="option-row-description">{description}</small>}
+            </div>
+            <div className="option-row-input">
                 {childWithId}
             </div>
-            {description && <small className="option-row-description">{description}</small>}
         </div>
     );
 }