Rename LineIcon -> RouteIcon, fix some size issues

5 files changed, 10 insertions, 9 deletions

diff --git a/src/frontend/app/routes/favourites.tsx b/src/frontend/app/routes/favourites.tsx
index c05ab11..6b57256 100644
--- a/src/frontend/app/routes/favourites.tsx
+++ b/src/frontend/app/routes/favourites.tsx
@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
-import LineIcon from "~/components/LineIcon";
+import RouteIcon from "~/components/RouteIcon";
 import { usePageTitle } from "~/contexts/PageTitleContext";
 import SpecialPlacesProvider, {
   type SpecialPlace,
@@ -288,7 +288,7 @@ function FavouriteStopItem({
           </div>
           <div className="flex flex-wrap gap-1 items-center">
             {stop.lines?.slice(0, 6).map((lineObj) => (
-              <LineIcon
+              <RouteIcon
                 key={lineObj.line}
                 line={lineObj.line}
                 colour={lineObj.colour}
diff --git a/src/frontend/app/routes/planner.tsx b/src/frontend/app/routes/planner.tsx
index 5fd0ce7..7bfc5a3 100644
--- a/src/frontend/app/routes/planner.tsx
+++ b/src/frontend/app/routes/planner.tsx
@@ -7,8 +7,8 @@ import { Layer, Source, type MapRef } from "react-map-gl/maplibre";
 import { useLocation } from "react-router";
 
 import { type ConsolidatedCirculation } from "~/api/schema";
-import LineIcon from "~/components/LineIcon";
 import { PlannerOverlay } from "~/components/PlannerOverlay";
+import RouteIcon from "~/components/RouteIcon";
 import { AppMap } from "~/components/shared/AppMap";
 import { APP_CONSTANTS } from "~/config/constants";
 import { useBackButton, usePageTitle } from "~/contexts/PageTitleContext";
@@ -155,7 +155,7 @@ const ItinerarySummary = ({
                 </div>
               ) : (
                 <div className="flex items-center gap-2">
-                  <LineIcon
+                  <RouteIcon
                     line={leg.routeShortName || leg.routeName || leg.mode || ""}
                     mode="pill"
                     colour={leg.routeColor || undefined}
@@ -505,7 +505,7 @@ const ItineraryDetail = ({
                       <Footprints className="w-4 h-4" />
                     </div>
                   ) : (
-                    <LineIcon
+                    <RouteIcon
                       line={leg.routeShortName || leg.routeName || ""}
                       mode="rounded"
                       colour={leg.routeColor || undefined}
diff --git a/src/frontend/app/routes/routes.tsx b/src/frontend/app/routes/routes.tsx
index 1e85cfb..b33fe58 100644
--- a/src/frontend/app/routes/routes.tsx
+++ b/src/frontend/app/routes/routes.tsx
@@ -3,7 +3,7 @@ import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router";
 import { fetchRoutes } from "~/api/transit";
-import LineIcon from "~/components/LineIcon";
+import RouteIcon from "~/components/RouteIcon";
 import { usePageTitle } from "~/contexts/PageTitleContext";
 import "../tailwind-full.css";
 
@@ -85,7 +85,7 @@ export default function RoutesPage() {
                       to={`/routes/${route.id}`}
                       className="flex items-center gap-3 p-4 bg-surface rounded-lg shadow hover:shadow-lg transition-shadow border border-border"
                     >
-                      <LineIcon
+                      <RouteIcon
                         line={route.shortName ?? "?"}
                         mode="pill"
                         colour={route.color ?? undefined}
diff --git a/src/frontend/app/routes/stops-$id.css b/src/frontend/app/routes/stops-$id.css
index dd0b8e3..583b5b9 100644
--- a/src/frontend/app/routes/stops-$id.css
+++ b/src/frontend/app/routes/stops-$id.css
@@ -47,6 +47,7 @@
   flex-direction: column;
 
   padding-block: 1rem;
+  padding-inline: 0.75rem;
   box-sizing: border-box;
 
   gap: 1rem;
diff --git a/src/frontend/app/routes/stops-$id.tsx b/src/frontend/app/routes/stops-$id.tsx
index 8f84764..3198fca 100644
--- a/src/frontend/app/routes/stops-$id.tsx
+++ b/src/frontend/app/routes/stops-$id.tsx
@@ -17,8 +17,8 @@ import {
 } from "~/api/schema";
 import { ArrivalList } from "~/components/arrivals/ArrivalList";
 import { ErrorDisplay } from "~/components/ErrorDisplay";
-import LineIcon from "~/components/LineIcon";
 import { PullToRefresh } from "~/components/PullToRefresh";
+import RouteIcon from "~/components/RouteIcon";
 import { StopHelpModal } from "~/components/stop/StopHelpModal";
 import { StopMapModal } from "~/components/stop/StopMapModal";
 import { StopUsageModal } from "~/components/stop/StopUsageModal";
@@ -155,7 +155,7 @@ export default function Estimates() {
           <div className={`estimates-lines-container scrollable`}>
             {apiRoutes.map((line) => (
               <div key={line.shortName} className="estimates-line-icon">
-                <LineIcon
+                <RouteIcon
                   line={line.shortName}
                   colour={line.colour}
                   textColour={line.textColour}