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>

5 files changed, 74 insertions, 7 deletions

diff --git a/src/frontend/app/components/LineIcon.css b/src/frontend/app/components/LineIcon.css
index fdfdd06..fe4a87f 100644
--- a/src/frontend/app/components/LineIcon.css
+++ b/src/frontend/app/components/LineIcon.css
@@ -118,4 +118,5 @@
 
   font: 600 14px / 1 monospace;
   letter-spacing: 0.05em;
+  text-wrap: nowrap;
 }
diff --git a/src/frontend/app/components/StopSheet.css b/src/frontend/app/components/StopSheet.css
index e9c04fb..75b12f0 100644
--- a/src/frontend/app/components/StopSheet.css
+++ b/src/frontend/app/components/StopSheet.css
@@ -35,6 +35,30 @@
   flex-wrap: wrap;
 }
 
+.stop-sheet-lines-container.scrollable {
+  display: grid;
+  grid-template-rows: repeat(2, 1fr);
+  grid-auto-flow: column;
+  /* align-content: flex-start; */
+  scrollbar-width: thin;
+  gap: 0.5rem 1rem;
+  overflow-x: scroll;
+  overflow-y: auto;
+}
+
+.stop-sheet-lines-container.scrollable::-webkit-scrollbar {
+  height: 6px;
+}
+
+.stop-sheet-lines-container.scrollable::-webkit-scrollbar-thumb {
+  background-color: var(--border-color);
+  border-radius: 3px;
+}
+
+.stop-sheet-line-icon {
+  flex-shrink: 0;
+}
+
 .stop-sheet-loading {
   display: flex;
   justify-content: center;
@@ -142,9 +166,8 @@
   display: flex;
   flex-direction: column;
   gap: 0.75rem;
-  margin: 1rem 0;
+  margin: 0.75rem 0 1rem 0;
   padding-top: 0.75rem;
-  border-top: 1px solid var(--border-color);
 }
 
 .stop-sheet-timestamp {
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>
   );
 };
diff --git a/src/frontend/app/routes/estimates-$id.css b/src/frontend/app/routes/estimates-$id.css
index fde4099..bb68c37 100644
--- a/src/frontend/app/routes/estimates-$id.css
+++ b/src/frontend/app/routes/estimates-$id.css
@@ -209,3 +209,31 @@
   width: 1rem;
   height: 1rem;
 }
+
+.estimates-lines-container {
+  display: flex;
+  gap: 0.5rem;
+  flex-wrap: wrap;
+  margin-bottom: 1rem;
+}
+
+.estimates-lines-container.scrollable {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  max-height: calc(2 * (var(--line-icon-height, 2rem) + 0.5rem));
+  align-content: flex-start;
+  scrollbar-width: thin;
+}
+
+.estimates-lines-container.scrollable::-webkit-scrollbar {
+  height: 6px;
+}
+
+.estimates-lines-container.scrollable::-webkit-scrollbar-thumb {
+  background-color: var(--border-color);
+  border-radius: 3px;
+}
+
+.estimates-line-icon {
+  flex-shrink: 0;
+}
diff --git a/src/frontend/app/routes/estimates-$id.tsx b/src/frontend/app/routes/estimates-$id.tsx
index c8c52b5..4502d9e 100644
--- a/src/frontend/app/routes/estimates-$id.tsx
+++ b/src/frontend/app/routes/estimates-$id.tsx
@@ -21,6 +21,7 @@ import { PullToRefresh } from "~/components/PullToRefresh";
 import { useAutoRefresh } from "~/hooks/useAutoRefresh";
 import { type RegionId, getRegionConfig } from "~/data/RegionConfig";
 import { StopAlert } from "~/components/StopAlert";
+import LineIcon from "~/components/LineIcon";
 
 export interface Estimate {
   line: string;
@@ -296,6 +297,18 @@ export default function Estimates() {
           </button>
         </div>
 
+        {stopData && stopData.lines && stopData.lines.length > 0 && (
+          <div
+            className={`estimates-lines-container ${stopData.lines.length >= 6 ? "scrollable" : ""}`}
+          >
+            {stopData.lines.map((line) => (
+              <div key={line} className="estimates-line-icon">
+                <LineIcon line={line} region={region} rounded />
+              </div>
+            ))}
+          </div>
+        )}
+
         {stopData && <StopAlert stop={stopData} />}
 
         <div className="table-responsive">