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

1 files changed, 3 insertions, 10 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;