diff options
| author | Ariel Costas Guerrero <ariel@costas.dev> | 2025-12-01 22:42:06 +0100 |
|---|---|---|
| committer | Ariel Costas Guerrero <ariel@costas.dev> | 2025-12-01 22:42:06 +0100 |
| commit | 284e625fd54570939945de1b3b9a2ab0c239448e (patch) | |
| tree | d19a12e3c90e40b111f35c3de24bf727e5933307 | |
| parent | 3227c7bc6bd233c92b1cf54bec689f0582dca547 (diff) | |
fix: adjust width of LineIcon container and improve marquee display logic
| -rw-r--r-- | src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx | 19 |
1 files changed, 11 insertions, 8 deletions
diff --git a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx index 8f43939..8a2eb94 100644 --- a/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx +++ b/src/frontend/app/components/Stops/ConsolidatedCirculationCard.tsx @@ -194,7 +194,7 @@ export const ConsolidatedCirculationCard: React.FC< `.trim()} {...interactiveProps} > - <div className="shrink-0"> + <div className="shrink-0 w-[7ch]"> <LineIcon line={estimate.line} mode="pill" /> </div> <div className="flex-1 min-w-0 flex flex-col gap-1"> @@ -273,13 +273,16 @@ export const ConsolidatedCirculationCard: React.FC< </div> <div className="route-info"> <strong>{estimate.route}</strong> - {estimate.nextStreets && estimate.nextStreets.length > 0 && ( - <Marquee speed={85}> - <div className="mr-32 font-mono"> - {estimate.nextStreets.join(" — ")} - </div> - </Marquee> - )} + {estimate.nextStreets && estimate.nextStreets.length > 0 && (() => { + const text = estimate.nextStreets.join(" — "); + return ( + <Marquee speed={85} play={text.length > 30}> + <div className="mr-32 font-mono"> + {text} + </div> + </Marquee> + ); + })()} </div> {hasGpsPosition && ( <div className="gps-indicator" title="Live GPS tracking"> |