From c11704b15ca702d8022e5e4d14f40610001c2f23 Mon Sep 17 00:00:00 2001
From: Abubeker Yasin <dev.abubeker@gmail.com>
Date: Wed, 26 Aug 2026 10:24:28 +0300
Subject: [PATCH] fix: ( reschedule ) stick the change summery card

---
 .../portal/src/app/booking/reschedule/page.tsx         | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/apps/edr-passenger-web/portal/src/app/booking/reschedule/page.tsx b/apps/edr-passenger-web/portal/src/app/booking/reschedule/page.tsx
index 8e58b8585..816d2547d 100644
--- a/apps/edr-passenger-web/portal/src/app/booking/reschedule/page.tsx
+++ b/apps/edr-passenger-web/portal/src/app/booking/reschedule/page.tsx
@@ -513,7 +513,11 @@ function ReschedulePageContent() {
         </div>
       )}
 
-      <div className="lg:grid lg:grid-cols-3 lg:gap-6 lg:items-start">
+      {/* No `items-start` here on purpose: it shrinks each column to its own content height, and a
+          sticky child can only travel inside its containing block — so the summary would scroll
+          away like a normal card. The grid default (stretch) gives the right column the full row
+          height to stick within. */}
+      <div className="lg:grid lg:grid-cols-3 lg:gap-6">
         {/* Left column — the choices */}
         <div className="lg:col-span-2 space-y-4">
         <div className="bg-white dark:bg-gray-800 rounded-2xl p-6 border border-gray-100 dark:border-gray-700 shadow-sm">
@@ -726,7 +730,9 @@ function ReschedulePageContent() {
 
         {/* Right column — sticky change summary (desktop only) */}
         <div className="hidden lg:block">
-          <div className="sticky top-6">
+          {/* Caps at the viewport and scrolls inside itself, so a long passenger list can't push
+              the total and the confirm button off the bottom of the screen. */}
+          <div className="sticky top-6 max-h-[calc(100vh-3rem)] overflow-y-auto">
             <ChangeSummary />
           </div>
         </div>