UX: settings are misaligned when translations are too long (#23308)

app/assets/javascripts/admin/addon/templates/customize-colors-show.hbs

@@ -47,16 +47,7 @@
     </div>
 
     <div class="admin-controls">
-      {{#unless this.model.theme_id}}
-        <div class="pull-right">
-          <label>
-            <Input @type="checkbox" @checked={{this.onlyOverridden}} />
-            {{i18n "admin.settings.show_overriden"}}
-          </label>
-        </div>
-      {{/unless}}
-
-      <div>
+      <div class="pull-left">
         {{#if this.model.theme_id}}
           <InlineEditCheckbox
             @action={{action "applyUserSelectable"}}
@@ -71,6 +62,15 @@
           </label>
         {{/if}}
       </div>
+
+      {{#unless this.model.theme_id}}
+        <div class="pull-right">
+          <label>
+            <Input @type="checkbox" @checked={{this.onlyOverridden}} />
+            {{i18n "admin.settings.show_overriden"}}
+          </label>
+        </div>
+      {{/unless}}
     </div>
 
     {{#if this.colors.length}}

app/assets/stylesheets/common/admin/customize.scss

@@ -180,6 +180,7 @@
     }
 
     &.color-scheme .admin-controls {
+      display: flex;
       padding: 1em;
       label {
         margin-bottom: 0;
@@ -187,6 +188,12 @@
           margin-top: 0;
         }
       }
+      .pull-left {
+        width: 70%;
+      }
+      .pull-right {
+        width: 30%;
+      }
     }
   }
   .add-component-button {