From a960a57c72d5e39eb77f30ba2c41f1ffedd49f43 Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 10 Aug 2018 22:09:46 -0400
Subject: [PATCH] Improving category reorder modal layout

---
 .../templates/modal/reorder-categories.hbs    |  2 +-
 .../stylesheets/common/base/cat_reorder.scss  | 44 +++++++++----------
 2 files changed, 23 insertions(+), 23 deletions(-)

diff --git a/app/assets/javascripts/discourse/templates/modal/reorder-categories.hbs b/app/assets/javascripts/discourse/templates/modal/reorder-categories.hbs
index acf26834e57..33221efb146 100644
--- a/app/assets/javascripts/discourse/templates/modal/reorder-categories.hbs
+++ b/app/assets/javascripts/discourse/templates/modal/reorder-categories.hbs
@@ -12,7 +12,7 @@
           {{d-button class="no-text" action="moveUp" actionParam=cat icon="arrow-up"}}
           {{d-button class="no-text" action="moveDown" actionParam=cat icon="arrow-down"}}
           {{#if cat.hasBufferedChanges}}
-            {{d-button class="no-text" action="commit" icon="check"}}
+            {{d-button class="no-text ok" action="commit" icon="check"}}
           {{/if}}
         </td>
         <td>{{category-badge cat allowUncategorized="true"}}</td>
diff --git a/app/assets/stylesheets/common/base/cat_reorder.scss b/app/assets/stylesheets/common/base/cat_reorder.scss
index c1f1ea9943f..ce0155129ed 100644
--- a/app/assets/stylesheets/common/base/cat_reorder.scss
+++ b/app/assets/stylesheets/common/base/cat_reorder.scss
@@ -1,31 +1,31 @@
 .reorder-categories {
+  thead {
+    border-bottom: 1px solid $primary-low;
+    th {
+      padding-bottom: 0.5em;
+      text-align: left;
+    }
+  }
   input {
     width: 4em;
-  }
-  .th-pos {
-    width: calc(4em + 150px);
-  }
-  tbody tr {
-    background-color: transparent;
-    transition: background 0s ease;
-    &.highlighted {
-      background-color: rgba($highlight, 0.4);
-      &.done {
-        background-color: transparent;
-        transition-duration: 1s;
-      }
+    @include breakpoint(mobile) {
+      width: 2em;
     }
-    &:first-child td {
-      padding-top: 7px;
-    }
-  }
-  tbody {
-    border-bottom: 1px solid blend-primary-secondary(50%);
   }
   table {
+    width: 100%;
     padding-bottom: 150px;
+    td {
+      padding: 0.5em 0.5em 0.5em 0;
+      @include breakpoint(mobile, min-width) {
+        min-width: 15em;
+      }
+    }
+  }
+  .badge-wrapper span.badge-category {
+    max-width: 20em;
+    @include breakpoint(mobile) {
+      max-width: 30vw;
+    }
   }
 }
-.category-admin-menu ul {
-  width: 320px;
-}