From 954f8f8e7e2cbac43b363fd5803cb410b41985ec Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Mon, 13 Sep 2021 13:43:43 -0400
Subject: [PATCH] UX: Fix alignment for admin controls on mobile (#14312)

---
 .../admin/addon/templates/site-settings.hbs   |  8 ++--
 .../admin/addon/templates/watched-words.hbs   |  8 ++--
 .../stylesheets/common/admin/admin_base.scss  | 43 +++++--------------
 .../stylesheets/common/admin/customize.scss   |  8 +++-
 4 files changed, 28 insertions(+), 39 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/templates/site-settings.hbs b/app/assets/javascripts/admin/addon/templates/site-settings.hbs
index c3166395589..f236db32a1a 100644
--- a/app/assets/javascripts/admin/addon/templates/site-settings.hbs
+++ b/app/assets/javascripts/admin/addon/templates/site-settings.hbs
@@ -1,9 +1,11 @@
 <div class="admin-controls">
 
   <div class="controls">
-    {{d-button action=(action "toggleMenu") class="menu-toggle" icon="bars"}}
-    {{text-field id="setting-filter" value=filter placeholderKey="type_to_filter" class="no-blur"}}
-    {{d-button class="btn-default" id="clear-filter" action=(action "clearFilter") label="admin.site_settings.clear_filter"}}
+    <div class="inline-form">
+      {{d-button action=(action "toggleMenu") class="menu-toggle" icon="bars"}}
+      {{text-field id="setting-filter" value=filter placeholderKey="type_to_filter" class="no-blur"}}
+      {{d-button class="btn-default" id="clear-filter" action=(action "clearFilter") label="admin.site_settings.clear_filter"}}
+    </div>
   </div>
   <div class="search controls">
     <label>
diff --git a/app/assets/javascripts/admin/addon/templates/watched-words.hbs b/app/assets/javascripts/admin/addon/templates/watched-words.hbs
index e353cb2bc51..53a08964199 100644
--- a/app/assets/javascripts/admin/addon/templates/watched-words.hbs
+++ b/app/assets/javascripts/admin/addon/templates/watched-words.hbs
@@ -1,9 +1,11 @@
 <div class="admin-contents">
   <div class="admin-controls">
     <div class="controls">
-      {{d-button action=(action "toggleMenu") class="menu-toggle" icon="bars"}}
-      {{text-field value=filter placeholderKey="admin.watched_words.search" class="no-blur"}}
-      {{d-button action=(action "clearFilter") label="admin.watched_words.clear_filter"}}
+      <div class="inline-form">
+        {{d-button action=(action "toggleMenu") class="menu-toggle" icon="bars"}}
+        {{text-field value=filter placeholderKey="admin.watched_words.search" class="no-blur"}}
+        {{d-button action=(action "clearFilter") label="admin.watched_words.clear_filter"}}
+      </div>
     </div>
   </div>
 
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 5d83ed49142..b3f46e4dd29 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -556,50 +556,37 @@ $mobile-breakpoint: 700px;
       }
     }
   }
-  .controls .menu-toggle {
-    display: none;
-    float: left;
-    padding: 5px 10px;
-    margin-right: 15px;
-    border: 1px solid var(--primary-medium);
+  .menu-toggle {
+    border-color: var(--primary-medium);
     border-radius: 3px;
     background: transparent;
     color: var(--primary);
     &:hover {
       background-color: var(--primary-low-mid);
     }
-    @media (max-width: $mobile-breakpoint) {
-      display: inline-block;
+
+    .not-mobile-device & {
+      display: none;
     }
   }
-  button {
-    margin-right: 5px;
-  }
-  input[type="text"] {
-    display: inline-block;
-    float: left;
-  }
+
   .result-message {
     display: inline-block;
     padding-left: 10px;
   }
-  .username {
-    input[type="text"] {
-      width: 240px;
-    }
-  }
+
   .search {
     label {
-      margin-top: 5px;
+      margin-bottom: 0px;
     }
-    .controls {
-      margin-left: 0;
-    } // Hide the search checkbox for very small screens
+
+    // Hide the search checkbox for very small screens
     // Todo: find somewhere to display it - probably requires switching its order in the html
     @media (max-width: 550px) {
       display: none;
     }
   }
+
   .toggle {
     span {
       font-weight: bold;
@@ -609,14 +596,6 @@ $mobile-breakpoint: 700px;
     display: inline-block;
     margin-right: 5px;
   }
-  .pull-right {
-    padding-right: 10px;
-  }
-}
-
-.paste-users {
-  width: 400px;
-  height: 150px;
 }
 
 .groups,
diff --git a/app/assets/stylesheets/common/admin/customize.scss b/app/assets/stylesheets/common/admin/customize.scss
index 61eaaa87f9c..a12063542f8 100644
--- a/app/assets/stylesheets/common/admin/customize.scss
+++ b/app/assets/stylesheets/common/admin/customize.scss
@@ -152,7 +152,13 @@
     }
 
     &.color-scheme .admin-controls {
-      padding: 0.5em;
+      padding: 1em;
+      label {
+        margin-bottom: 0;
+        input[type="checkbox"] {
+          margin-top: 0;
+        }
+      }
     }
   }
   .add-component-button {