improved admin side settings UI

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

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

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

@@ -6,27 +6,31 @@
     {{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">
-        <span class="setting-label">{{i18n 'admin.wizard.field.validations.date_after'}}</span>
-        <div class="setting-value">
-          {{date-picker-past
-                value=(readonly props.date_after)
-                containerId="date-container"
-                onSelect=(action (mut props.date_after))}}
-        </div>
     </div>
-  <div>
-    {{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 class="validation-section">
+      <span class="setting-label">{{i18n 'admin.wizard.field.validations.date_after'}}</span>
+      <div class="setting-value">
+        {{date-picker-past
+              value=(readonly props.date_after)
+              containerId="date-container"
+              onSelect=(action (mut props.date_after))}}
+      </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'}}
+        {{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

@@ -642,4 +642,15 @@
       }
     }
   }
-}
+}
+
+.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"