💄 Add ScrollingText component and use it in StopAreaRepr component

Update DestinationPassages component to use it.

frontend/src/stopsSearchMenu.tsx

@@ -9,7 +9,7 @@ import {
 } from 'leaflet';
 
 import { Stop } from './types';
-import { PositionedPanel, renderLineTransportMode, renderLinePicto, TransportModeWeights } from './utils';
+import { PositionedPanel, renderLineTransportMode, renderLinePicto, ScrollingText, TransportModeWeights } from './utils';
 
 import { AppContextContext, AppContextStore } from "./appContext";
 import { BusinessDataContext, BusinessDataStore } from "./businessData";
@@ -191,10 +191,10 @@ const StopRepr: VoidComponent<{ stop: Stop }> = (props) => {
 type ByTransportModeReprs = {
 	mode: JSX.Element | undefined;
 	lines: Record<string, JSX.Element | JSX.Element[] | undefined>;
-};
-
+}
 
 const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
+	const fontSize: number = 10;
 
 	const businessDataStore: BusinessDataStore | undefined = useContext(BusinessDataContext);
 	const appContextStore: AppContextStore | undefined = useContext(AppContextContext);
@@ -248,7 +248,9 @@ const StopAreaRepr: VoidComponent<{ stop: Stop }> = (props) => {
 
 	return (
 		<div class="stop" onClick={() => setDisplayedStops([props.stop])}>
-			<div class="name">{props.stop.name}</div>
+			<div class="name" >
+				<ScrollingText height={fontSize} width={100} content={props.stop.name} />
+			</div>
 			{lineReprs()}
 		</div>
 	);