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>

1 files changed, 13 insertions, 0 deletions

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">