WIP Add styling for mobile table

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

@@ -19,7 +19,8 @@ i.e.
 @include u-padding-right('05');
 ----------------------------------------
 */
-// USWDS tokens are a bit too coarse in their letter-spacing steps
+
+// Finer grained letterspacing adjustments
 $letter-space--xs: .0125em; 
 
 @use "uswds-core" as *;
@@ -37,6 +38,7 @@ $letter-space--xs: .0125em;
  h1 {
   @include typeset('sans', '2xl', 2);
   margin: 0 0 units(2);
+  color: color('primary-darker');
  }
 
  h2 {
@@ -56,13 +58,15 @@ $letter-space--xs: .0125em;
   margin-bottom: 0;
 }
 
-.register-form-step p {
+.register-form-step p,
+.dashboard p {
   @include typeset('sans', 'sm', 5);
   max-width: measure(5);
 
-  &:last-of-type {
-    margin-bottom: 0;
-  }
+  //TODO: Revisit
+  // &:last-of-type {
+  //   margin-bottom: 0;
+  // }
 }
 
 .register-form-step a {
@@ -120,6 +124,20 @@ 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');
@@ -136,29 +154,7 @@ section.dashboard {
   }
 
   .usa-table {
-    td, th {
-      border: 0; //reset border
-      border-bottom: 1px solid color('base-light');
-    }
-
-    thead th {
-      color: color('primary-darker');
-      border-bottom: 2px solid color('base-light');
-    }
-    
-    tbody tr:last-of-type {
-      td, th {
-        border-bottom: 0;
-      }
-    }
-  
-    td {
-      padding: units(2);
-    }
-
-    th:first-of-type {
-      padding-left: 0;
-    }
+    width: 100%;
 
     a, a:visited {
       color: color('primary');
@@ -166,14 +162,48 @@ section.dashboard {
 
     a {
       display: flex;
-      align-item: flex-start;
-      
+      align-items: flex-start;
+
       .usa-icon {
         // align icon with x height
         margin-top: units(0.5);
         margin-right: units(0.5);
       }
     }
+
+    td, th {
+      padding: units(2px) 0;
+      border: none;
+    }
+  }
+  
+  @include at-media(tablet) {
+    .usa-table {
+      td, th {
+        // border: none; //reset border
+        border-bottom: 1px solid color('base-light');
+      }
+
+      thead th {
+        color: color('primary-darker');
+        border-bottom: 2px solid color('base-light');
+      }
+
+      tbody tr:last-of-type {
+        td, th {
+          border-bottom: 0;
+        }
+      }
+
+      td {
+        padding: units(2);
+      }
+
+      th:first-of-type {
+        padding-left: 0;
+      }
+
+    }
   }
 }
 

src/registrar/templates/home.html

@@ -9,7 +9,7 @@
 {% if user.is_authenticated %}
 {# complete logged in page together here #}
 
-<div class="tablet:grid-offset-1">
+<div class="tablet:grid-offset-2">
   <h1>Manage your domains</h2>
 
   <p><a href="{% url 'application:' %}" class="usa-button">Start a new domain request</a></p>
@@ -23,7 +23,7 @@
         {{ domain }}
         {% endfor %}
       {% else %}
-        You don't have any registered domains yet
+        <p>You don't have any registered domains yet</p>
       {% endif %}
     </section>
   </div>
@@ -32,7 +32,7 @@
     <section class="dashboard">
       <h2>Active domain requests</h2>
       {% if domain_applications %}
-      <table class="usa-table usa-table--borderless">
+      <table class="usa-table usa-table--borderless usa-table--stacked">
         <caption class="sr-only">Your domain applications</caption>
         <thead>
           <tr>
@@ -45,11 +45,11 @@
         <tbody>
           {% for application in domain_applications %}
           <tr>
-            <th th scope="row" role="rowheader">
+            <th th scope="row" role="rowheader" data-label="Domain name">
               {{ application.requested_domain.name|default:"New domain request" }}
             </th>
-            <td data-sort-value="{{ application.created_at|date:"U" }}">{{ application.created_at|date }}</td>
-            <td>{{ application.status|title }}</td>
+            <td data-sort-value="{{ application.created_at|date:"U" }}" data-label="Date created">{{ application.created_at|date }}</td>
+            <td data-label="Status">{{ application.status|title }}</td>
             <td>
               <a href="{% url 'edit-application' application.pk %}">
                 {% if application.status == "started" %}