From 6bdb71e8bd51837796bb5986ba04562fe2c4e2e2 Mon Sep 17 00:00:00 2001
From: Cristen Jones <cjones3@mbta.com>
Date: Fri, 3 Nov 2023 15:33:18 -0400
Subject: [PATCH] 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             | 16 +++++++++++++---
 .../ts/stop/components/DeparturesAndMap.tsx      |  4 ++--
 2 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/apps/site/assets/css/_stop-card.scss b/apps/site/assets/css/_stop-card.scss
index 4bc13a0985..20b438859a 100644
--- a/apps/site/assets/css/_stop-card.scss
+++ b/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,8 @@ $radius: 4px;
   &--realtime {
     @extend .stop-departures;
     @include media-breakpoint-down(sm) {
-      height: unset;
-      max-height: 100vh;
+      max-height: unset;
+      overflow-y: unset;
     }
   }
 
diff --git a/apps/site/assets/ts/stop/components/DeparturesAndMap.tsx b/apps/site/assets/ts/stop/components/DeparturesAndMap.tsx
index 4befa848f5..7abcd7de16 100644
--- a/apps/site/assets/ts/stop/components/DeparturesAndMap.tsx
+++ b/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}