feat: Update detour list page and table styles for mobile

assets/css/bootstrap/_variable_overrides.scss

@@ -16,3 +16,21 @@ $ui-alert: semantic.$ui-alert;
 $service-alert: semantic.$service-alert;
 $light: new_tokens.$gray-50;
 $dark: new_tokens.$gray-900;
+
+// These breakpoints are overridden in order to match with our old set
+// of breakpoints, defined in _skate_ui.scss. Our long-term goal is to
+// replace our "custom" breakpoint system with these bootstrap
+// breakpoints, and then possibly to change these values to match our
+// forward-looking designs.
+$grid-breakpoints: (
+  xs: 0,
+
+  // sm - Breakpoint between mobile and tablet
+  sm: 480px,
+
+  // md - Breakpoint between tablet and desktop
+  md: 800px,
+
+  // lg - Breakpoint between desktop and wide-screen desktop
+  lg: 1340px,
+);

assets/css/detours/_detour_table.scss

@@ -30,7 +30,9 @@ $table-border-radius: 0.5rem;
   tr {
     th:first-child,
     td:first-child {
-      border-left: $table-border;
+      @include media-breakpoint-up(md) {
+        border-left: $table-border;
+      }
     }
 
     th:last-child,

assets/css/utilities/_hideable.scss

@@ -11,7 +11,7 @@
 }
 
 .u-hide-for-mobile {
-  @media screen and (max-width: map-get($breakpoints, "max-mobile-landscape-tablet-portrait-width")) {
+  @include media-breakpoint-down(md) {
     display: none;
   }
 }

assets/src/components/detourListPage.tsx

@@ -83,10 +83,10 @@ export const DetourListPage = () => {
   const [showDetourModal, setShowDetourModal] = useState(false)
 
   return (
-    <div className="c-detour-list-page h-100 overflow-y-auto p-4 bg-white">
+    <div className="c-detour-list-page h-100 overflow-y-auto p-0 p-md-4 bg-white">
       {userInTestGroup(TestGroups.DetoursPilot) && (
         <Button
-          className="c-detour-list-page__button icon-link fw-light px-3 py-2"
+          className="c-detour-list-page__button icon-link fw-light px-3 py-2 u-hide-for-mobile"
           onClick={() => setShowDetourModal(true)}
         >
           <PlusSquare />

assets/src/components/detoursTable.tsx

@@ -14,7 +14,7 @@ export const DetoursTable = ({ data }: DetoursTableProps) => {
 
   return (
     <Table hover className="c-detours-table">
-      <thead>
+      <thead className="u-hide-for-mobile">
         <tr>
           <th className="px-3 py-4">Route and direction</th>
           <th className="px-3 py-4 u-hide-for-mobile">Starting Intersection</th>

assets/tests/components/__snapshots__/detourListPage.test.tsx.snap

@@ -2,12 +2,14 @@
 
 exports[`DetourListPage renders detour list page with dummy data 1`] = `
 <div
-  className="c-detour-list-page h-100 overflow-y-auto p-4 bg-white"
+  className="c-detour-list-page h-100 overflow-y-auto p-0 p-md-4 bg-white"
 >
   <table
     className="c-detours-table table table-hover"
   >
-    <thead>
+    <thead
+      className="u-hide-for-mobile"
+    >
       <tr>
         <th
           className="px-3 py-4"