feat(DeparturesList): Hide map on small screens

mbta · Sep 25, 2023 · b03a830 · b03a830
1 parent 958c3ff
commit b03a830
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 12 deletions.
diff --git a/apps/site/assets/css/_stop-card.scss b/apps/site/assets/css/_stop-card.scss
@@ -93,22 +93,13 @@ $radius: 4px;
     // with map above departure list
     @include media-breakpoint-down(sm) {
       bottom: 0;
-      grid-template-rows: min-content 1fr 1fr;
+      display: block;
       left: 0;
       padding-bottom: 0;
       padding-top: 0;
       position: fixed;
       right: 0;
       top: 0;
-
-      .stop-map {
-        grid-column: 1 / 2;
-        grid-row: 2 / 3;
-      }
-
-      .stop-routes {
-        grid-row: 3 / 4;
-      }
     }
   }
 
@@ -173,7 +164,7 @@ $radius: 4px;
     @extend .stop-departures;
     @include media-breakpoint-down(sm) {
       height: unset;
-      max-height: 70vh;
+      max-height: 100vh;
     }
   }
 
@@ -308,6 +299,10 @@ $radius: 4px;
     margin: 0;
   }
 
+  @include media-breakpoint-down(sm) {
+    margin-bottom: 2rem;
+  }
+
   li:not(.c-alert-item) {
     border-top: .25px solid $gray-lightest;
     display: grid;

diff --git a/apps/site/assets/ts/stop/components/DeparturesAndMap.tsx b/apps/site/assets/ts/stop/components/DeparturesAndMap.tsx
@@ -172,7 +172,7 @@ const DeparturesAndMap = ({
           />
         )}
       </div>
-      <div className={`stop-map ${activeRow ? "" : "hidden-sm-down"}`}>
+      <div className={`stop-map hidden-sm-down`}>
         <StopMapRedesign
           stop={stop}
           lines={