styling misc section of dashboard

app/assets/javascripts/admin/templates/dashboard_next.hbs

@@ -116,22 +116,24 @@
           </div>
         </div>
 
-        <hr />
+
+        <div class="last-dashboard-update">
+          <div>
+          <h4>{{i18n "admin.dashboard.last_updated"}} </h4>
+          <p>{{updatedTimestamp}}</p>
+             <a rel="noopener" target="_blank" href="https://meta.discourse.org/tags/release-notes" class="btn">
+          {{i18n "admin.dashboard.whats_new_in_discourse"}}
+                  </a>
+
+          </div>
+     
+        </div>
+      </div>
 
         <p>
           {{i18n 'admin.dashboard.find_old'}} {{#link-to 'admin.dashboard'}}{{i18n "admin.dashboard.old_link"}}{{/link-to}}
         </p>
 
-        <hr />
-
-        <p class="last-dashboard-update">
-          {{i18n "admin.dashboard.last_updated"}} {{updatedTimestamp}}
-        </p>
-
-        <a rel="noopener" target="_blank" href="https://meta.discourse.org/tags/release-notes" class="btn">
-          {{i18n "admin.dashboard.whats_new_in_discourse"}}
-        </a>
-      </div>
     {{/conditional-loading-section}}
   </div>
 

app/assets/stylesheets/common/admin/dashboard_next.scss

@@ -97,18 +97,63 @@
   }
 
   .misc {
+    display: flex;
     border: 1px solid $primary-low;
-    padding: 20px;
+
+    .durability, .last-dashboard-update {
+      flex: 1 1 50%;
+      box-sizing: border-box;
+      margin: 20px 0;
+      padding: 0 20px;
+    }
+
     .durability {
       display: flex;
+      flex-wrap: wrap;
       justify-content: space-between;
+      .backups, .uploads {
+        flex: 1 1 100%; 
+      }
+
+      .uploads p:last-of-type {
+        margin-bottom: 0;
+      }
 
       .durability-title {
         text-transform: capitalize;
       }
     }
+
+    @media screen and (max-width: 400px) {
+      flex-wrap: wrap;
+      .durability, .last-dashboard-update {
+        flex: 1 1 100%;
+        text-align: left;
+      }
+      .last-dashboard-update {
+        display: block;
+        margin: 0 20px 20px 20px;
+        padding: 20px 0 0 0;
+        border-top: 1px solid $primary-low;
+        border-left: none;
+      }
+    }
+    .last-dashboard-update {
+      border-left: 1px solid $primary-low;
+      text-align: center;
+      display: flex;
+      justify-content: center;    
+      div {
+        align-self: center;
+        h4 {
+          margin-bottom: 0;
+        }
+      }
+    }
   }
 
+
+
   .community-health {
     .period-chooser .period-chooser-header {
       .selected-name, .d-icon {
@@ -232,10 +277,10 @@
     padding: 1em;
   }
 
-  @include small-width  {
+  @media screen and (max-width: 650px)  {
     table {
       tbody tr td {
-        font-size: $font-down-2;
+        font-size: $font-down-1;
       }
     }
   }