From 439d7da74a577ee586dae46761e1d1e69849067b Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Fri, 7 Nov 2025 10:44:29 +0100
Subject: Refactor StopGallery and StopGalleryItem components for improved
 layout and item display; update StopList to switch recent and favourite stops
 display order.

---
 src/frontend/app/components/StopGallery.css     | 13 +++----------
 src/frontend/app/components/StopGallery.tsx     |  1 -
 src/frontend/app/components/StopGalleryItem.tsx |  6 +++---
 src/frontend/app/root.css                       |  4 ++++
 src/frontend/app/routes/map.tsx                 |  3 +--
 src/frontend/app/routes/stoplist.tsx            | 10 +++++-----
 6 files changed, 16 insertions(+), 21 deletions(-)

(limited to 'src')

diff --git a/src/frontend/app/components/StopGallery.css b/src/frontend/app/components/StopGallery.css
index adba001..bc9b955 100644
--- a/src/frontend/app/components/StopGallery.css
+++ b/src/frontend/app/components/StopGallery.css
@@ -32,7 +32,6 @@
   scroll-snap-type: x mandatory;
   scrollbar-width: none; /* Firefox */
   -ms-overflow-style: none; /* IE and Edge */
-  margin: 0 -1rem;
   padding: 0 1rem;
 }
 
@@ -49,7 +48,7 @@
 
 /* Gallery Item */
 .gallery-item {
-  flex: 0 0 280px;
+  flex: 0 0 100%;
   scroll-snap-align: start;
   scroll-snap-stop: always;
 }
@@ -65,18 +64,10 @@
   border-radius: 12px;
   text-decoration: none;
   color: var(--text-color);
-  transition: all 0.2s ease-in-out;
-  height: 100%;
   min-height: 120px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
 }
 
-.gallery-item-link:hover {
-  transform: translateY(-2px);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
-  border-color: var(--button-background-color);
-}
-
 .gallery-item-header {
   display: flex;
   align-items: center;
@@ -101,6 +92,8 @@
   margin-bottom: 0.75rem;
   line-height: 1.3;
   display: -webkit-box;
+  /* Standard property for compatibility */
+  line-clamp: 2;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
diff --git a/src/frontend/app/components/StopGallery.tsx b/src/frontend/app/components/StopGallery.tsx
index 3646fdd..18d0725 100644
--- a/src/frontend/app/components/StopGallery.tsx
+++ b/src/frontend/app/components/StopGallery.tsx
@@ -49,7 +49,6 @@ const StopGallery: React.FC<StopGalleryProps> = ({
     <div className="gallery-container">
       <div className="gallery-header">
         <h2 className="page-subtitle">{title}</h2>
-        <span className="gallery-counter">{stops.length}</span>
       </div>
 
       <div className="gallery-scroll-container" ref={scrollRef}>
diff --git a/src/frontend/app/components/StopGalleryItem.tsx b/src/frontend/app/components/StopGalleryItem.tsx
index 24d92a2..0af14bc 100644
--- a/src/frontend/app/components/StopGalleryItem.tsx
+++ b/src/frontend/app/components/StopGalleryItem.tsx
@@ -23,11 +23,11 @@ const StopGalleryItem: React.FC<StopGalleryItemProps> = ({ stop }) => {
           {StopDataProvider.getDisplayName(region, stop)}
         </div>
         <div className="gallery-item-lines">
-          {stop.lines?.slice(0, 3).map((line) => (
+          {stop.lines?.slice(0, 6).map((line) => (
             <LineIcon key={line} line={line} region={region} />
           ))}
-          {stop.lines && stop.lines.length > 3 && (
-            <span className="more-lines">+{stop.lines.length - 3}</span>
+          {stop.lines && stop.lines.length > 5 && (
+            <span className="more-lines">+{stop.lines.length - 5}</span>
           )}
         </div>
       </Link>
diff --git a/src/frontend/app/root.css b/src/frontend/app/root.css
index fb955eb..d5a75b2 100644
--- a/src/frontend/app/root.css
+++ b/src/frontend/app/root.css
@@ -163,3 +163,7 @@ body {
     max-width: 1024px;
   }
 }
+
+.maplibregl-ctrl-attrib-inner {
+  font-size: 0.9em;
+}
diff --git a/src/frontend/app/routes/map.tsx b/src/frontend/app/routes/map.tsx
index d3288e9..e8b3cf3 100644
--- a/src/frontend/app/routes/map.tsx
+++ b/src/frontend/app/routes/map.tsx
@@ -144,7 +144,7 @@ export default function StopMap() {
         longitude: getLongitude(mapState.center),
         zoom: mapState.zoom,
       }}
-      attributionControl={false}
+      attributionControl={{compact: false}}
       maxBounds={
         REGIONS[region].bounds
           ? [REGIONS[region].bounds!.sw, REGIONS[region].bounds!.ne]
@@ -153,7 +153,6 @@ export default function StopMap() {
     >
       <NavigationControl position="top-right" />
       <GeolocateControl position="top-right" trackUserLocation={true} />
-      <AttributionControl position="bottom-right" compact={false} />
 
       <Source
         id="stops-source"
diff --git a/src/frontend/app/routes/stoplist.tsx b/src/frontend/app/routes/stoplist.tsx
index fe6d2f1..a98b2b4 100644
--- a/src/frontend/app/routes/stoplist.tsx
+++ b/src/frontend/app/routes/stoplist.tsx
@@ -279,16 +279,16 @@ export default function StopList() {
 
       {!loading && (
         <StopGallery
-          stops={recentStops.slice(0, 5)}
-          title={t("stoplist.recents")}
+          stops={favouriteStops.sort((a, b) => a.stopId - b.stopId)}
+          title={t("stoplist.favourites")}
+          emptyMessage={t("stoplist.no_favourites")}
         />
       )}
 
       {!loading && (
         <StopGallery
-          stops={favouriteStops.sort((a, b) => a.stopId - b.stopId)}
-          title={t("stoplist.favourites")}
-          emptyMessage={t("stoplist.no_favourites")}
+          stops={recentStops.slice(0, 5)}
+          title={t("stoplist.recents")}
         />
       )}
 
-- 
cgit v1.3