From fb4979c53a9fea2cd4214068d02bad4288dcd7dc Mon Sep 17 00:00:00 2001
From: Cristen Jones <cjones3@mbta.com>
Date: Thu, 26 Dec 2024 17:05:14 -0500
Subject: [PATCH] feat: use ScrollIntoView hook to improve scroll experience
 when clicking near bottom of itinerary list

---
 assets/ts/phoenix-hooks/scroll-into-view.ts       |  5 +++++
 lib/dotcom_web/components/trip_planner/results.ex | 12 ++++++++----
 lib/dotcom_web/live/trip_planner.ex               | 12 ++++--------
 3 files changed, 17 insertions(+), 12 deletions(-)

diff --git a/assets/ts/phoenix-hooks/scroll-into-view.ts b/assets/ts/phoenix-hooks/scroll-into-view.ts
index b436a30cd5..9328a7b52a 100644
--- a/assets/ts/phoenix-hooks/scroll-into-view.ts
+++ b/assets/ts/phoenix-hooks/scroll-into-view.ts
@@ -5,6 +5,11 @@ const ScrollIntoView: Partial<ViewHook> = {
     if (this.el) {
       this.el.scrollIntoView({ behavior: "smooth" });
     }
+  },
+  updated() {
+    if (this.el) {
+      this.el.scrollIntoView({ behavior: "smooth" });
+    }
   }
 };
 
diff --git a/lib/dotcom_web/components/trip_planner/results.ex b/lib/dotcom_web/components/trip_planner/results.ex
index 0a057f156f..c8a1179f12 100644
--- a/lib/dotcom_web/components/trip_planner/results.ex
+++ b/lib/dotcom_web/components/trip_planner/results.ex
@@ -10,10 +10,14 @@ defmodule DotcomWeb.Components.TripPlanner.Results do
 
   def results(assigns) do
     ~H"""
-    <section class={[
-      "w-full",
-      @class
-    ]}>
+    <section
+      id="trip-planner-results"
+      phx-hook="ScrollIntoView"
+      class={[
+        "w-full",
+        @class
+      ]}
+    >
       <div
         :if={Enum.count(@results.itinerary_groups) > 0 && @results.itinerary_group_selection}
         class="h-min w-full mb-3.5"
diff --git a/lib/dotcom_web/live/trip_planner.ex b/lib/dotcom_web/live/trip_planner.ex
index bf62ffbbb7..ef4ed6d6af 100644
--- a/lib/dotcom_web/live/trip_planner.ex
+++ b/lib/dotcom_web/live/trip_planner.ex
@@ -63,14 +63,10 @@ defmodule DotcomWeb.Live.TripPlanner do
   def render(assigns) do
     ~H"""
     <h1>Trip Planner <mark style="font-weight: 400">Preview</mark></h1>
-    <div style="row">
+    <div>
       <.input_form class="mb-4" changeset={@input_form.changeset} />
       <div>
-        <.results_summary
-          class="mt-2 mb-6 md:sticky md:top-0 bg-white z-[1000]"
-          changeset={@input_form.changeset}
-          results={@results}
-        />
+        <.results_summary class="mt-2 mb-6" changeset={@input_form.changeset} results={@results} />
         <div class={[
           "flex flex-col gap-4 md:flex-row md:gap-7"
         ]}>
@@ -78,7 +74,7 @@ defmodule DotcomWeb.Live.TripPlanner do
             module={MbtaMetro.Live.Map}
             id="trip-planner-map"
             class={[
-              "md:order-last md:sticky md:top-28",
+              "md:order-last md:sticky md:top-4",
               "h-64 md:h-[32rem] w-full",
               @results.itinerary_group_selection == nil && "hidden md:block",
               @results.itinerary_group_selection != nil && "block"
@@ -90,7 +86,7 @@ defmodule DotcomWeb.Live.TripPlanner do
           />
           <.results
             :if={Enum.count(@results.itinerary_groups) > 0}
-            class="md:max-w-[25rem]"
+            class="md:max-w-[25rem] md:sticky md:top-4"
             results={@results}
           />
         </div>