From e9e28276369bd1262449645f0e95e7d0db635200 Mon Sep 17 00:00:00 2001
From: Penar Musaraj <pmusaraj@gmail.com>
Date: Fri, 18 Jun 2021 08:57:13 -0400
Subject: [PATCH] FIX: Mobile layout for watched words admin UI (#13427)

---
 .../addon/controllers/admin-watched-words.js  |  1 -
 .../admin/addon/templates/watched-words.hbs   | 46 ++++++++++---------
 .../stylesheets/common/admin/staff_logs.scss  |  5 ++
 3 files changed, 29 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/admin/addon/controllers/admin-watched-words.js b/app/assets/javascripts/admin/addon/controllers/admin-watched-words.js
index ce41e741fd7..1830e4c742d 100644
--- a/app/assets/javascripts/admin/addon/controllers/admin-watched-words.js
+++ b/app/assets/javascripts/admin/addon/controllers/admin-watched-words.js
@@ -35,7 +35,6 @@ export default Controller.extend({
         })
       );
     });
-
     this.set("model", model);
   },
 
diff --git a/app/assets/javascripts/admin/addon/templates/watched-words.hbs b/app/assets/javascripts/admin/addon/templates/watched-words.hbs
index 3342a22b949..e353cb2bc51 100644
--- a/app/assets/javascripts/admin/addon/templates/watched-words.hbs
+++ b/app/assets/javascripts/admin/addon/templates/watched-words.hbs
@@ -1,26 +1,28 @@
-<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="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>
   </div>
-</div>
 
-<div class="admin-nav pull-left">
-  <ul class="nav nav-stacked">
-    {{#each model as |action|}}
-      <li class={{action.nameKey}}>
-        {{#link-to "adminWatchedWords.action" action.nameKey}}
-          {{action.name}}
-          {{#if action.words}}<span class="count">({{action.words.length}})</span>{{/if}}
-        {{/link-to}}
-      </li>
-    {{/each}}
-  </ul>
-</div>
+  <div class="admin-nav pull-left">
+    <ul class="nav nav-stacked">
+      {{#each model as |action|}}
+        <li class={{action.nameKey}}>
+          {{#link-to "adminWatchedWords.action" action.nameKey}}
+            {{action.name}}
+            {{#if action.words}}<span class="count">({{action.words.length}})</span>{{/if}}
+          {{/link-to}}
+        </li>
+      {{/each}}
+    </ul>
+  </div>
 
-<div class="admin-detail pull-left mobile-closed watched-words-detail">
-  {{outlet}}
-</div>
+  <div class="admin-detail pull-left mobile-closed watched-words-detail">
+    {{outlet}}
+  </div>
 
-<div class="clearfix"></div>
+  <div class="clearfix"></div>
+</div>
diff --git a/app/assets/stylesheets/common/admin/staff_logs.scss b/app/assets/stylesheets/common/admin/staff_logs.scss
index 639820ccfa0..c893a174f70 100644
--- a/app/assets/stylesheets/common/admin/staff_logs.scss
+++ b/app/assets/stylesheets/common/admin/staff_logs.scss
@@ -396,6 +396,11 @@ table.screened-ip-addresses {
   .watched-word-form {
     margin-bottom: 1em;
   }
+
+  .watched-word-controls .btn {
+    margin-bottom: 0.25em;
+    margin-right: 0.25em;
+  }
 }
 
 .watched-words-test-modal p {