fix(DepartureList): better mobile fullheight view

let the fixed positioning maintain the boundaries of this section, but give it a grid display and lay out the scrollable section as a scrollable grid item.

apps/site/assets/css/_stop-card.scss

@@ -80,6 +80,14 @@ $radius: 4px;
 
   .back-to-routes + .stop-routes {
     grid-row: 2 / 3;
+
+    // on mobile, adopt a full-screen "app" view,
+    // this is the scrollable section
+    @include media-breakpoint-down(sm) {
+      overflow-y: scroll;
+      overscroll-behavior: contain;
+      -webkit-overflow-scrolling: touch;
+    }
   }
 
   .stop-map {
@@ -93,8 +101,10 @@ $radius: 4px;
     // with map above departure list
     @include media-breakpoint-down(sm) {
       bottom: 0;
-      display: block;
+      display: grid;
       left: 0;
+      gap: 0;
+      grid-template-rows: auto 1fr;
       padding-bottom: 0;
       padding-top: 0;
       position: fixed;
@@ -163,8 +173,7 @@ $radius: 4px;
   &--realtime {
     @extend .stop-departures;
     @include media-breakpoint-down(sm) {
-      height: unset;
-      max-height: 100vh;
+      max-height: unset;
     }
   }
 

apps/site/assets/ts/stop/components/DeparturesAndMap.tsx

@@ -233,9 +233,9 @@ const DeparturesAndMap = ({
       className={`stop-routes-and-map ${activeRow ? "selected-departure" : ""}`}
     >
       {activeRow && BackToRoutes}
-      <div className="stop-routes">
+      <div ref={refEl} className="stop-routes">
         {activeRow ? (
-          <div ref={refEl} className="stop-departures--realtime">
+          <div className="stop-departures--realtime">
             <DepartureList
               route={activeRow.route}
               stop={stop}