fine-tuning dashboard alignment

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>

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;
     }

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