Merge pull request #481 from cisagov/ik/gov-table-style

Move table styles

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

@@ -222,10 +222,18 @@ section.dashboard {
   p {
     margin-bottom: 0;
   }
+
+  @include at-media(mobile-lg) {
+    margin-top: units(5);
+
+    h2 {
+      margin-bottom: units(3);
+    }
+  }
 }
 
+
 .dotgov-table {
-  .usa-table {
   width: 100%;
 
   a {
@@ -236,16 +244,20 @@ section.dashboard {
     &:visited {
       color: color('primary');
     }
+
     .usa-icon {
       // align icon with x height
       margin-top: units(0.5);
       margin-right: units(0.5);
     }
   }
+
+  th[data-sortable]:not([aria-sort]) .usa-table__header__button {
+    right: auto;
+  }
 }
 
-  // Table on small mobile
-  .usa-table--stacked {
+.dotgov-table--stacked {
     td, th {
       padding: units(1) units(2) units(2px) 0;
       border: none;
@@ -273,17 +285,12 @@ section.dashboard {
 }
 
 @include at-media(mobile-lg) {
-    margin-top: units(5);
 
-    h2 {
-      margin-bottom: units(3);
-    }
-
-    .usa-table tr {
+  .dotgov-table {
+    tr {
       border: none;
     }
 
-    .usa-table {
     td, th {
       border-bottom: 1px solid color('base-light');
     }
@@ -299,8 +306,13 @@ section.dashboard {
       }
     }
     
-      td, th {
-        padding: units(2);
+    tbody th {
+      word-break: break-word;
+    }
+
+    td, th,
+    .usa-tabel th{
+      padding: units(2) units(2) units(2) 0;
     }
 
     th:first-of-type {
@@ -312,7 +324,6 @@ section.dashboard {
     }
   }
 }
-}
 
 
 #wrapper {

src/registrar/templates/domain_users.html

@@ -14,7 +14,7 @@
   <h1>User management</h1>
 
   {% if domain.permissions %}
-  <table class="dotgov-table usa-table usa-table--borderless usa-table--stacked">
+  <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table--stacked dotgov-table">
       <caption class="sr-only">Domain users</caption>
       <thead>
         <tr>

src/registrar/templates/home.html

@@ -17,7 +17,7 @@
   <section class="dashboard tablet:grid-col-11 desktop:grid-col-10">
     <h2>Registered domains</h2>
     {% if domains %}
-    <table class="usa-table usa-table--borderless usa-table--stacked">
+    <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
       <caption class="sr-only">Your domain applications</caption>
       <thead>
         <tr>
@@ -56,7 +56,7 @@
   <section class="dashboard tablet:grid-col-11 desktop:grid-col-10">
     <h2>Active domain requests</h2>
     {% if domain_applications %}
-    <table class="usa-table usa-table--borderless usa-table--stacked">
+    <table class="usa-table usa-table--borderless usa-table--stacked dotgov-table dotgov-table--stacked">
       <caption class="sr-only">Your domain applications</caption>
       <thead>
         <tr>