Small changes to styles

src/pages/Index.tsx

@@ -79,8 +79,8 @@ function LineEl(props: { line: Line }) {
             style={`color: ${props.line.color};--hover-bg: ${props.line.color};--hover-on-bg: white`}
         >
             <LineSegmentsIcon class="px-1" fill={props.line.color} />
-            <span class="px-2" title={props.line.district}>
-                Linea {props.line.name}
+            <span class="px-2" title={props.line.name}>
+                Linea {props.line.id}
             </span>
             <Suspense>
                 <For each={routesData() ?? []}>
@@ -185,6 +185,11 @@ function RouteEl(props: {
                     set_return_count((c) => c - 1);
                 }}
                 onClick={() => {
+                    if (departure_active() && return_active()) {
+                        toggle_departure();
+                        toggle_return();
+                        return;
+                    }
                     if (departure_count() === 1) {
                         toggle_departure();
                     }

src/pages/IndexMobile.tsx

@@ -44,12 +44,12 @@ function LinesContainer() {
 
     return (
         <div class="fixed bottom-0 left-0 w-screen text-c-on-bg z-[500]">
-            <div class="py-1">
+            <div class="whitespace-nowrap">
                 <For each={linesData() ?? []}>
                     {(line) => <RouteChipContainer line={line} active_line={selected_line()} />}
                 </For>
             </div>
-            <div class="py-2 bg-c-bg">
+            <div class="py-2 bg-c-bg whitespace-nowrap overflow-x-scroll">
                 <For each={linesData() ?? []}>
                     {(line) => (
                         <LineChip
@@ -84,7 +84,7 @@ function LineChip(props: {
                 }
             }}
         >
-            Linea {props.line.name}
+            Linea {props.line.id}
         </button>
     );
 }
@@ -96,9 +96,9 @@ function RouteChipContainer(props: {line: Line, active_line: number}) {
         return res.json();
     });
 
-    const container_classes = () => (props.active_line === props.line.id ? "inline-block" : "hidden");
+    const container_classes = () => (props.active_line === props.line.id ? "inline-block w-screen" : "hidden");
     return (
-        <div class={container_classes()}
+        <div class={`${container_classes()} whitespace-nowrap overflow-x-scroll pb-2`}
             style={`--hover-bg: ${props.line.color};--hover-on-bg: white`}
         >
             <For each={routesData() ?? []}>