UX: Fix mobile styling for admin color schemes (#14314)

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

@@ -17,7 +17,7 @@
         label="admin.customize.copy"
       }}
       {{d-button
-        class="btn-default"
+        class="btn-default copy-to-clipboard"
         action=(action "copyToClipboard" model)
         icon="far-clipboard"
         label="admin.customize.copy_to_clipboard"
@@ -38,8 +38,6 @@
       {{/if}}
     </div>
 
-    <br>
-
     <div class="admin-controls">
       {{#unless model.theme_id}}
         <div class="pull-right">

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

@@ -46,6 +46,9 @@
     input {
       margin-bottom: 0;
       font-size: $font-down-2;
+      .ios-device & {
+        font-size: var(--font-down-2);
+      }
     }
   }
 
@@ -84,7 +87,7 @@
       font-weight: bold;
       margin-bottom: 0.25em;
       display: flex;
-      align-items: stretch;
+      align-items: center;
 
       input {
         margin: 0;
@@ -519,7 +522,8 @@
     .controls {
       display: flex;
       align-items: center;
-      button,
+      margin-bottom: 1em;
+      button:not(:last-child),
       a {
         margin-right: 10px;
       }
@@ -539,6 +543,9 @@
     }
     td.hex {
       width: 160px;
+      .color-picker {
+        display: inline-flex;
+      }
     }
     td.actions {
       width: 200px;

app/assets/stylesheets/mobile/admin_customize.scss

@@ -1,13 +1,15 @@
-.admin-customize {
+body .admin-customize {
   .show-current-style {
     padding: 0;
     width: 100%;
   }
 
-  .themes-list {
+  .themes-list,
+  .color-schemes {
     width: 100%;
     margin-bottom: 1em;
   }
+
   .form-horizontal.theme.settings .setting-label,
   .admin-container .select-kit {
     width: 100%;
@@ -16,5 +18,37 @@
   .admin-container {
     display: flex;
     flex-wrap: wrap;
+    padding: 0;
+  }
+
+  .content-list.color-schemes ul {
+    max-height: 250px;
+    overflow-x: auto;
+  }
+
+  .color-scheme {
+    h1,
+    h1 input {
+      width: 100%;
+    }
+    .copy-to-clipboard {
+      display: none;
+    }
+
+    .controls,
+    .admin-controls {
+      width: 100%;
+    }
+
+    .sp-replacer {
+      flex-shrink: 0;
+    }
+
+    td {
+      vertical-align: top;
+    }
+    td.actions {
+      width: 40px;
+    }
   }
 }