Fix some terminus formatting, add marquee-d next streets

5 files changed, 21 insertions, 1 deletions

diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css
index e61ac25..57d30c8 100644
--- a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css
+++ b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.css
@@ -118,7 +118,6 @@
 }
 
 .consolidated-circulation-card .card-row.meta {
-  flex-wrap: wrap;
   justify-content: flex-start;
   gap: 0.4rem;
 }
diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx
index 6f92644..7198c7b 100644
--- a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx
+++ b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx
@@ -1,4 +1,5 @@
 import { useMemo } from "react";
+import Marquee from 'react-fast-marquee';
 import { useTranslation } from "react-i18next";
 import LineIcon from "~components/LineIcon";
 import { type ConsolidatedCirculation } from "~routes/stops-$id";
@@ -220,6 +221,13 @@ export const ConsolidatedCirculationCard: React.FC<
               {chip.label}
             </span>
           ))}
+
+          {estimate.nextStreets && estimate.nextStreets.length > 0 && (
+            <Marquee speed={85}>
+              <div className="mr-64"></div>
+              {estimate.nextStreets.join(" — ")}
+            </Marquee>
+          )}
         </div>
       )}
     </Tag>
diff --git a/src/frontend/app/routes/stops-$id.tsx b/src/frontend/app/routes/stops-$id.tsx
index cdc74eb..25aa3e7 100644
--- a/src/frontend/app/routes/stops-$id.tsx
+++ b/src/frontend/app/routes/stops-$id.tsx
@@ -37,6 +37,7 @@ export interface ConsolidatedCirculation {
   };
   isPreviousTrip?: boolean;
   previousTripShapeId?: string;
+  nextStreets?: string[];
 }
 
 export const getCirculationId = (c: ConsolidatedCirculation): string => {
diff --git a/src/frontend/package-lock.json b/src/frontend/package-lock.json
index 65509fc..c51f69b 100644
--- a/src/frontend/package-lock.json
+++ b/src/frontend/package-lock.json
@@ -20,6 +20,7 @@
         "maplibre-theme": "^1.0.0",
         "react": "^19.2.0",
         "react-dom": "^19.2.0",
+        "react-fast-marquee": "^1.6.5",
         "react-i18next": "^16.3.5",
         "react-leaflet": "^5.0.0",
         "react-leaflet-markercluster": "^5.0.0-rc.0",
@@ -5827,6 +5828,16 @@
         "react": "^19.2.0"
       }
     },
+    "node_modules/react-fast-marquee": {
+      "version": "1.6.5",
+      "resolved": "https://registry.npmjs.org/react-fast-marquee/-/react-fast-marquee-1.6.5.tgz",
+      "integrity": "sha512-swDnPqrT2XISAih0o74zQVE2wQJFMvkx+9VZXYYNSLb/CUcAzU9pNj637Ar2+hyRw6b4tP6xh4GQZip2ZCpQpg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">= 16.8.0 || ^18.0.0",
+        "react-dom": ">= 16.8.0 || ^18.0.0"
+      }
+    },
     "node_modules/react-i18next": {
       "version": "16.3.5",
       "resolved": "https://registry.npmjs.org/react-i18next/-/react-i18next-16.3.5.tgz",
diff --git a/src/frontend/package.json b/src/frontend/package.json
index 38d05f9..90c9ea7 100644
--- a/src/frontend/package.json
+++ b/src/frontend/package.json
@@ -26,6 +26,7 @@
     "maplibre-theme": "^1.0.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
+    "react-fast-marquee": "^1.6.5",
     "react-i18next": "^16.3.5",
     "react-leaflet": "^5.0.0",
     "react-leaflet-markercluster": "^5.0.0-rc.0",