Refactor StopGallery and StopGalleryItem components for improved layout and item display; update StopList to switch recent and favourite stops display order.

3 files changed, 6 insertions, 14 deletions

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>