improved admin side settings UI

assets/javascripts/discourse/templates/components/wizard-custom-field.hbs

@@ -219,10 +219,9 @@
         </div>
       </div>
       
-    </div>
-  {{/if}}
-
       {{#if validations}}
         {{wizard-realtime-validation-settings field=field validations=validations}}
       {{/if}}
+    </div>
+  {{/if}}
 {{/if}}

assets/javascripts/discourse/templates/components/wizard-realtime-validation-settings.hbs

@@ -6,15 +6,17 @@
     {{input type="checkbox" checked=props.status }}
     {{i18n (concat 'admin.wizard.field.validations.' name) }}
   </span>
-  <div class="setting full">
+  <div class="validation-container">
+    <div class="validation-section">
     <span class="setting-label">{{i18n 'admin.wizard.field.validations.categories'}}</span>
     <div class="setting-value">
         {{category-selector
             categories=(get this (concat 'validationBuffer.' name '.categories'))
-            onChange=(action 'updateValidationCategories' name props) }}
+            onChange=(action 'updateValidationCategories' name props)
+            class="wizard" }}
     </div>
     </div>
-    <div class="setting full">
+  <div class="validation-section">
       <span class="setting-label">{{i18n 'admin.wizard.field.validations.date_after'}}</span>
       <div class="setting-value">
         {{date-picker-past
@@ -23,10 +25,12 @@
               onSelect=(action (mut props.date_after))}}
       </div>
     </div>
-  <div>
+    <div class="validation-section">
+      <span class="setting-label">{{i18n 'admin.wizard.field.validations.position'}}</span>
+      <div class="setting-value">
         {{radio-button name=(concat name field.id) value="above" selection=props.position}} {{i18n 'admin.wizard.field.validations.above'}}
-  </div>
-  <div>
         {{radio-button name=(concat name field.id) value="below" selection=props.position}} {{i18n 'admin.wizard.field.validations.below'}}
       </div>
+    </div>
+  </div>
 {{/each-in}}

assets/stylesheets/common/wizard-admin.scss

@@ -643,3 +643,14 @@
     }
   }
 }
+
+.validation-container {
+  display: flex;
+  .validation-section {
+    width: 250px;
+  }
+}
+
+.wizard.category-selector {
+  width: 200px !important;
+}

config/locales/client.en.yml

@@ -179,6 +179,7 @@ en:
           validations:
             header: "Realtime Validation Settings"
             similar_topics: "Similar Topics"
+            position: "Position"
             above: "Above"
             below: "Below"
             categories: "Categories"