From 0add08015b348de5a069168b57e0be6f5778b97b Mon Sep 17 00:00:00 2001
From: Copilot <198982749+Copilot@users.noreply.github.com>
Date: Fri, 7 Nov 2025 12:24:44 +0100
Subject: Show all stop lines with horizontal scroll for 6+ lines (#79)

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: arielcostas <94913521+arielcostas@users.noreply.github.com>
Co-authored-by: Ariel Costas Guerrero <ariel@costas.dev>
---
 src/frontend/app/components/StopSheet.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

(limited to 'src/frontend/app/components/StopSheet.tsx')

diff --git a/src/frontend/app/components/StopSheet.tsx b/src/frontend/app/components/StopSheet.tsx
index 422558b..0c19cb6 100644
--- a/src/frontend/app/components/StopSheet.tsx
+++ b/src/frontend/app/components/StopSheet.tsx
@@ -129,8 +129,8 @@ export const StopSheet: React.FC<StopSheetProps> = ({
     data?.sort((a, b) => a.minutes - b.minutes).slice(0, 4) || [];
 
   return (
-    <Sheet isOpen={isOpen} onClose={onClose} detent={"content-height" as any}>
-      <Sheet.Container>
+    <Sheet isOpen={isOpen} onClose={onClose} detent={"content-height" as any} >
+      <Sheet.Container drag="y">
         <Sheet.Header />
         <Sheet.Content>
           <div className="stop-sheet-content">
@@ -139,7 +139,9 @@ export const StopSheet: React.FC<StopSheetProps> = ({
               <span className="stop-sheet-id">({stop.stopId})</span>
             </div>
 
-            <div className="stop-sheet-lines-container">
+            <div
+              className={`stop-sheet-lines-container ${stop.lines.length >= 6 ? "scrollable" : ""}`}
+            >
               {stop.lines.map((line) => (
                 <div key={line} className="stop-sheet-line-icon">
                   <LineIcon line={line} region={region} rounded />
@@ -191,7 +193,7 @@ export const StopSheet: React.FC<StopSheetProps> = ({
                               <Clock />
                               {formatTime(estimate.minutes)}
                             </div>
-                            {REGIONS[region].showMeters && (
+                            {REGIONS[region].showMeters && estimate.meters >= 0 && (
                               <div className="stop-sheet-estimate-distance">
                                 {formatDistance(estimate.meters)}
                               </div>
@@ -245,7 +247,7 @@ export const StopSheet: React.FC<StopSheetProps> = ({
           </div>
         </Sheet.Content>
       </Sheet.Container>
-      <Sheet.Backdrop />
+      <Sheet.Backdrop onTap={onClose} />
     </Sheet>
   );
 };
-- 
cgit v1.3