UX: fix color preference layout (#21346)

app/assets/javascripts/discourse/app/templates/preferences/interface.hbs

@@ -35,56 +35,57 @@
 {{#if this.showColorSchemeSelector}}
   <fieldset class="control-group color-scheme">
     <legend class="control-label">{{i18n "user.color_scheme"}}</legend>
-    <div class="control-subgroup light-color-scheme">
-      {{#if this.showDarkColorSchemeSelector}}
-        <div class="instructions">{{i18n "user.color_schemes.regular"}}</div>
-      {{/if}}
-      <div class="controls">
-        <ComboBox
-          @content={{this.userSelectableColorSchemes}}
-          @value={{this.selectedColorSchemeId}}
-          @onChange={{action "loadColorScheme"}}
-          @options={{hash
-            translatedNone=this.selectedColorSchemeNoneLabel
-            autoInsertNoneItem=this.showColorSchemeNoneItem
-          }}
-        />
-      </div>
-    </div>
-    {{#if this.showDarkColorSchemeSelector}}
-      <div class="control-subgroup dark-color-scheme">
-        <div class="instructions">{{i18n "user.color_schemes.dark"}}</div>
+    <div class="controls">
+      <div class="control-subgroup light-color-scheme">
+        {{#if this.showDarkColorSchemeSelector}}
+          <div class="instructions">{{i18n "user.color_schemes.regular"}}</div>
+        {{/if}}
         <div class="controls">
           <ComboBox
-            @content={{this.userSelectableDarkColorSchemes}}
-            @value={{this.selectedDarkColorSchemeId}}
-            @onChange={{action "loadDarkColorScheme"}}
+            @content={{this.userSelectableColorSchemes}}
+            @value={{this.selectedColorSchemeId}}
+            @onChange={{action "loadColorScheme"}}
+            @options={{hash
+              translatedNone=this.selectedColorSchemeNoneLabel
+              autoInsertNoneItem=this.showColorSchemeNoneItem
+            }}
           />
         </div>
       </div>
-
+      {{#if this.showDarkColorSchemeSelector}}
+        <div class="control-subgroup dark-color-scheme">
+          <div class="instructions">{{i18n "user.color_schemes.dark"}}</div>
+          <div class="controls">
+            <ComboBox
+              @content={{this.userSelectableDarkColorSchemes}}
+              @value={{this.selectedDarkColorSchemeId}}
+              @onChange={{action "loadDarkColorScheme"}}
+            />
+          </div>
+        </div>
+      {{/if}}
+      {{#if this.previewingColorScheme}}
+        {{#if this.previewingColorScheme}}
+          <DButton
+            @action={{action "undoColorSchemePreview"}}
+            @label="user.color_schemes.undo"
+            @icon="undo"
+            @class="btn-default btn-small undo-preview"
+          />
+        {{/if}}
+        <div class="controls color-scheme-checkbox">
+          <PreferenceCheckbox
+            @labelKey="user.color_scheme_default_on_all_devices"
+            @checked={{this.makeColorSchemeDefault}}
+          />
+        </div>
+      {{/if}}
+    </div>
+    {{#if this.showDarkColorSchemeSelector}}
       <div class="instructions">
         {{i18n "user.color_schemes.dark_instructions"}}
       </div>
     {{/if}}
-
-    {{#if this.previewingColorScheme}}
-      {{#if this.previewingColorScheme}}
-        <DButton
-          @action={{action "undoColorSchemePreview"}}
-          @label="user.color_schemes.undo"
-          @icon="undo"
-          @class="btn-default btn-small undo-preview"
-        />
-      {{/if}}
-
-      <div class="controls color-scheme-checkbox">
-        <PreferenceCheckbox
-          @labelKey="user.color_scheme_default_on_all_devices"
-          @checked={{this.makeColorSchemeDefault}}
-        />
-      </div>
-    {{/if}}
   </fieldset>
 {{/if}}
 

app/assets/stylesheets/common/base/discourse.scss

@@ -573,10 +573,6 @@ table {
     max-width: 100%;
   }
 
-  .control-group {
-    @include clearfix;
-  }
-
   .control-label:not(.checkbox-label) {
     font-family: var(--heading-font-family);
     font-weight: bold;

app/assets/stylesheets/common/base/user.scss

@@ -545,7 +545,6 @@
 
   .instructions {
     color: var(--primary-medium);
-    margin-bottom: 10px;
     font-size: var(--font-down-1);
     line-height: var(--line-height-large);
 
@@ -595,8 +594,11 @@
     font-size: var(--font-down-1);
   }
 
+  .color-scheme .controls {
+    display: flex;
+  }
+
   .control-subgroup {
-    float: left;
     + .controls {
       clear: both;
       padding-top: 1em;

app/assets/stylesheets/common/components/ignored-user-list.scss

@@ -1,3 +1,9 @@
+.user-ignore {
+  .btn-icon-text {
+    margin-top: 0.5em;
+  }
+}
+
 .ignored-list {
   overflow: auto;
   max-height: 150px;