design revamp

apps/edr-passenger-web/portal/src/components/ProgressIndicator.tsx

@@ -3,7 +3,9 @@
 import { Check } from 'lucide-react';
 import { useEffect, useRef } from 'react';
 
-const steps = [
+// Shared source of truth for the booking flow's step order/labels — also
+// consumed by AppSidebar's vertical step list on desktop.
+export const BOOKING_STEPS = [
   { id: 'search',       name: 'Search' },
   { id: 'results',      name: 'Results' },
   { id: 'passengers',   name: 'Passengers' },
@@ -12,6 +14,7 @@ const steps = [
   { id: 'payment',      name: 'Payment' },
   { id: 'confirmation', name: 'Done' },
 ];
+const steps = BOOKING_STEPS;
 
 export function ProgressIndicator({ currentStep }: { currentStep: string }) {
   const currentIndex = steps.findIndex((s) => s.id === currentStep);
@@ -70,24 +73,18 @@ export function ProgressIndicator({ currentStep }: { currentStep: string }) {
     );
   };
 
+  // Desktop shows the vertical step list embedded in AppSidebar instead —
+  // this component is mobile-only now (the sidebar doesn't exist below lg).
   return (
-    <nav aria-label="Progress">
-      {/* Mobile: full-bleed scrollable */}
+    <nav aria-label="Progress" className="lg:hidden">
       <div
         ref={scrollRef}
-        className="md:hidden overflow-x-auto scrollbar-hide px-4 py-3"
+        className="overflow-x-auto scrollbar-hide px-4 py-3"
       >
         <ol className="flex items-start min-w-full">
           {steps.map((s, i) => stepItem(s, i))}
         </ol>
       </div>
-
-      {/* Desktop: full container width matching header/footer */}
-      <div className="hidden md:block container mx-auto px-4 py-4">
-        <ol className="flex items-start max-w-6xl mx-auto">
-          {steps.map((s, i) => stepItem(s, i))}
-        </ol>
-      </div>
     </nav>
   );
 }