Adjust table and page style for different screen widths

src/registrar/assets/sass/_theme/_uswds-theme-custom-styles.scss

@@ -124,29 +124,16 @@ a.breadcrumb__back {
   background-color: color('primary-lightest');
 }
 
-//TODO: Move into dashboard; Change color for table heads on mobile
-//check if better to use usa-table--sortable and usa-table--stacked as targets
-.usa-table--stacked tr th {
-  border-top: 1px solid pink;
-}
-.usa-table--stacked tr:first-child th:first-child {
-  border-top: none;
-}
 
-.usa-table--stacked tr {
-  border-bottom: none;
-  border-top: 2px solid color('base-light');
-  margin-top: units(2);
-}
 section.dashboard {
   background-color: color('white');
   border: 1px solid color('base-lighter');
   border-radius: 4px;
   padding: 0 units(2) units(3);
-  margin-top: units(5);
+  margin-top: units(3);
 
   h2 {
-    margin-bottom: units(3);
+    margin-bottom: units(2);
   }
 
   p {
@@ -156,14 +143,14 @@ section.dashboard {
   .usa-table {
     width: 100%;
 
-    a, a:visited {
-      color: color('primary');
-    }
-
     a {
       display: flex;
       align-items: flex-start;
+      color: color('primary');
 
+      &:visited {
+        color: color('primary');
+      }
       .usa-icon {
         // align icon with x height
         margin-top: units(0.5);
@@ -171,13 +158,47 @@ section.dashboard {
       }
     }
 
+  }
+
+  // Table on small mobile
+  .usa-table--stacked {
     td, th {
-      padding: units(2px) 0;
+      padding: units(1) units(2) units(2px) 0;
       border: none;
     }
+
+    tr:first-child th:first-child {
+      border-top: none;
+    }
+
+    tr {
+      border-bottom: none;
+      border-top: 2px solid color('base-light');
+      margin-top: units(2);
+
+      &:first-child {
+        margin-top: 0;
+      }
+    }
+
+    td[data-label]:before, 
+    th[data-label]:before {
+      color: color('primary-darker');
+      padding-bottom: units(2px);
+    }
   }
   
-  @include at-media(tablet) {
+  @include at-media(mobile-lg) {
+    margin-top: units(5);
+
+    h2 {
+      margin-bottom: units(3);
+    }
+
+    .usa-table tr {
+      border: none;
+    }
+
     .usa-table {
       td, th {
         // border: none; //reset border
@@ -195,7 +216,7 @@ section.dashboard {
         }
       }
 
-      td {
+      td, th {
         padding: units(2);
       }
 
@@ -203,6 +224,9 @@ section.dashboard {
         padding-left: 0;
       }
 
+      thead tr:first-child th:first-child {
+        border-top: none;
+      }
     }
   }
 }

src/registrar/templates/home.html

@@ -9,13 +9,13 @@
 {% if user.is_authenticated %}
 {# complete logged in page together here #}
 
-<div class="tablet:grid-offset-2">
+<div class="tablet:grid-offset-1 desktop:grid-offset-2">
   <h1>Manage your domains</h2>
 
   <p><a href="{% url 'application:' %}" class="usa-button">Start a new domain request</a></p>
 
 
-  <div class="tablet:grid-col-10">
+  <div class="tablet:grid-col-11 desktop:grid-col-10">
     <section class="dashboard">
       <h2>Registered domains</h2>
       {% if domains %}
@@ -28,7 +28,7 @@
     </section>
   </div>
 
-  <div class="tablet:grid-col-10">
+  <div class="tablet:grid-col-11 desktop:grid-col-10">
     <section class="dashboard">
       <h2>Active domain requests</h2>
       {% if domain_applications %}
@@ -77,7 +77,7 @@
     </section>
   </div>
 
-  <div class="tablet:grid-col-10">
+  <div class="tablet:grid-col-11 desktop:grid-col-10">
     <section class="dashboard">
       <h2>Archived domains</h2>
       {% if archived_domains %}
@@ -90,8 +90,8 @@
     </section>
   </div>
 
-  <div class="tablet:grid-col-10">
+  <div class="tablet:grid-col-11 desktop:grid-col-10">
-    <h2 class="padding-top-3"> Export domains</h2>
+    <h2 class="padding-top-1 mobile-lg:padding-top-3"> Export domains</h2>
     <p>If you would like to analyze your list of domains further, you can download the list of domains and their statuses as csv file</p>
     <a href="{% url 'todo' %}" class="usa-button usa-button--outline">
       Export domains as csv