Assorted table and layout fixes

scss/components/_global_navigation.scss

@@ -4,7 +4,7 @@
   .sidenav__link {
     padding-right: $gap;
 
-    @include media($medium-screen) {
+    @include media($large-screen) {
       padding-right: $gap * 2;
     }
   }
@@ -12,7 +12,7 @@
   .sidenav__link-label {
     @include hide;
 
-    @include media($medium-screen) {
+    @include media($large-screen) {
       @include unhide;
       padding-left: $gap;
     }

scss/components/_layout.scss

@@ -26,7 +26,7 @@ body {
   .global-panel-container {
     margin: $gap;
     max-width: $site-max-width;
-    overflow: auto;
+    overflow-x: hidden;
 
     @include media($medium-screen) {
       margin: $gap * 2;

scss/elements/_tables.scss

@@ -39,5 +39,42 @@ table {
     .table-cell--expand {
       width: 100%;
     }
+
+    .table-cell--hide-small {
+      display: none;
+
+      @include media($medium-screen) {
+        display: table-cell;
+      }
+    }
+  }
+
+  @at-root .panel #{&} {
+    tr:last-child td {
+      border-bottom: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.responsive-table-wrapper {
+  overflow-x: auto;
+  @include panel-margin;
+
+  table {
+    margin-bottom: 0;
+  }
+
+  @at-root .panel #{&} {
+    tr:last-child td {
+      border-bottom: 0;
+    }
+
+    &:last-child {
+      margin-bottom: 0;
+    }
   }
 }

templates/requests.html.to

@@ -14,8 +14,10 @@
       <div class="panel__heading">
         <h1>Requests <a class="usa-button usa-button-secondary" href='{{ reverse_url('request_new') }}'>New Request</a></h1>
       </div>
+    </div>
 
-      <table class="usa-table-borderless" width="100%">
+    <div class='responsive-table-wrapper'>
+      <table>
         <thead>
           <tr>
             <th scope="col">Order ID</th>
@@ -42,9 +44,6 @@
           {% end %}
         </tbody>
       </table>
-
-
-
     </div>
   </div>
 </div>

templates/styleguide.html.to

@@ -175,11 +175,12 @@
     </ul>
   </section>
 
-  <table class='col--grow'>
+  <div class='responsive-table-wrapper'>
+    <table>
       <thead>
         <tr>
           <th class='table-cell--expand'>Expanded Column</th>
-        <th>Normal Column</th>
+          <th class='table-cell--hide-small'>Hidden on Small</th>
           <th class='table-cell--align-right'>Right Aligned</th>
           <th class='table-cell--shrink'>Shrunk</th>
         </tr>
@@ -188,26 +189,27 @@
       <tbody>
         <tr>
           <td class='table-cell--expand'>Table Cell</td>
-        <td>Table Cell</td>
+          <td class='table-cell--hide-small'>Table Cell</td>
           <td class='table-cell--align-right'>1,234.56</td>
           <td class='table-cell--shrink'>Table Cell</td>
         </tr>
 
         <tr>
           <td class='table-cell--expand'>Table Cell</td>
-        <td>Table Cell</td>
+          <td class='table-cell--hide-small'>Table Cell</td>
           <td class='table-cell--align-right'>1,231,253.43</td>
           <td class='table-cell--shrink'>Table Cell</td>
         </tr>
 
         <tr>
           <td class='table-cell--expand'>Table Cell</td>
-        <td>Table Cell</td>
+          <td class='table-cell--hide-small'>Table Cell</td>
           <td class='table-cell--align-right'>564.54</td>
           <td class='table-cell--shrink'>Table Cell</td>
         </tr>
       </tbody>
     </table>
+  </div>
 
   <div class='action-group'>
     <a href='/styleguide' class='action-group__action usa-button usa-button-big'>Action Group Button</a>