From 7ab7696c948e008a92c44bf8f97294cc33acf89f Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Thu, 17 May 2018 11:41:58 -0400
Subject: [PATCH] fine-tuning dashboard alignment

---
 .../admin/templates/dashboard_next.hbs        |  2 +-
 .../stylesheets/common/admin/admin_base.scss  |  1 -
 .../common/admin/dashboard_next.scss          | 21 +++++++++++++++++--
 3 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/app/assets/javascripts/admin/templates/dashboard_next.hbs b/app/assets/javascripts/admin/templates/dashboard_next.hbs
index 87825182481..ec1e52e4bac 100644
--- a/app/assets/javascripts/admin/templates/dashboard_next.hbs
+++ b/app/assets/javascripts/admin/templates/dashboard_next.hbs
@@ -53,7 +53,7 @@
 
 <div class="section-columns">
   <div class="section-column">
-    <div class="dashboard-table">
+    <div class="dashboard-table activity-metrics">
       {{#conditional-loading-section isLoading=isLoading title=(i18n "admin.dashboard.activity_metrics")}}
         <div class="table-title">
           <h3>{{i18n "admin.dashboard.activity_metrics"}}</h3>
diff --git a/app/assets/stylesheets/common/admin/admin_base.scss b/app/assets/stylesheets/common/admin/admin_base.scss
index 33da3ec0e0f..d473536d09b 100644
--- a/app/assets/stylesheets/common/admin/admin_base.scss
+++ b/app/assets/stylesheets/common/admin/admin_base.scss
@@ -880,7 +880,6 @@ section.details {
 
   .upgrade-header {
     flex: 1 1 100%;
-    margin: .25em 0 1em 0;
     @media screen and (max-width: 650px) {
        margin: 0;
     }
diff --git a/app/assets/stylesheets/common/admin/dashboard_next.scss b/app/assets/stylesheets/common/admin/dashboard_next.scss
index 0259bb56889..3fe538aa7dc 100644
--- a/app/assets/stylesheets/common/admin/dashboard_next.scss
+++ b/app/assets/stylesheets/common/admin/dashboard_next.scss
@@ -54,6 +54,9 @@
       }
 
       display: flex;
+      @media screen and (max-width: 400px) {
+        flex-wrap: wrap;
+      }
       align-items: center;
       justify-content: space-between;
       border-bottom: 1px solid $primary-low;
@@ -62,7 +65,7 @@
     }
 
     .section-body {
-      padding: 1em 0;
+      padding: 1em 0 0;
     }
   }
 
@@ -266,6 +269,17 @@
   }
 }
 
+.dashboard-table.activity-metrics {
+  table {
+    @media screen and (min-width: 400px) {
+      table-layout: auto;
+    }
+    tr th {
+      text-align: right;
+    }
+  }
+}
+
 .top-referred-topics, .trending-search {
   th:first-of-type {
     text-align: left;
@@ -347,7 +361,10 @@
 
         td.value {
           text-align: right;
-          transform: translateX(-40%);
+          padding: 8px 21px 8px 8px; // accounting for negative right caret margin
+          &:nth-of-type(2) {
+            padding: 8px 12px 8px;
+          }
           i {
             display: none;
             margin-right: -12px; // align on caret