From f33e81d6fd2975d235313e4ee0d490d25be19cd2 Mon Sep 17 00:00:00 2001
From: Ariel Costas Guerrero <ariel@costas.dev>
Date: Sat, 8 Nov 2025 18:57:58 +0100
Subject: Fix scrolling on mobile finally!

---
 src/frontend/app/components/StopSheet.tsx | 91 ++++++++++++++++---------------
 1 file changed, 46 insertions(+), 45 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 440f283..6977d87 100644
--- a/src/frontend/app/components/StopSheet.tsx
+++ b/src/frontend/app/components/StopSheet.tsx
@@ -1,17 +1,17 @@
+import { Clock, RefreshCw } from "lucide-react";
 import React, { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { Sheet } from "react-modal-sheet";
 import { Link } from "react-router";
-import { useTranslation } from "react-i18next";
-import { Clock, RefreshCw } from "lucide-react";
-import LineIcon from "./LineIcon";
-import { StopSheetSkeleton } from "./StopSheetSkeleton";
+import type { Stop } from "~/data/StopDataProvider";
+import { useApp } from "../AppContext";
+import { REGIONS, type RegionId, getRegionConfig } from "../data/RegionConfig";
+import { type Estimate } from "../routes/estimates-$id";
 import { ErrorDisplay } from "./ErrorDisplay";
+import LineIcon from "./LineIcon";
 import { StopAlert } from "./StopAlert";
-import { type Estimate } from "../routes/estimates-$id";
-import { REGIONS, type RegionId, getRegionConfig } from "../data/RegionConfig";
-import { useApp } from "../AppContext";
 import "./StopSheet.css";
-import type { Stop } from "~/data/StopDataProvider";
+import { StopSheetSkeleton } from "./StopSheetSkeleton";
 
 interface StopSheetProps {
   isOpen: boolean;
@@ -50,7 +50,6 @@ export const StopSheet: React.FC<StopSheetProps> = ({
 }) => {
   const { t } = useTranslation();
   const { region } = useApp();
-  const regionConfig = getRegionConfig(region);
   const [data, setData] = useState<Estimate[] | null>(null);
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<ErrorInfo | null>(null);
@@ -206,46 +205,48 @@ export const StopSheet: React.FC<StopSheetProps> = ({
                   )}
                 </div>
 
-                <div className="stop-sheet-footer">
-                  {lastUpdated && (
-                    <div className="stop-sheet-timestamp">
-                      {t("estimates.last_updated", "Actualizado a las")}{" "}
-                      {lastUpdated.toLocaleTimeString(undefined, {
-                        hour: "2-digit",
-                        minute: "2-digit",
-                        second: "2-digit",
-                      })}
-                    </div>
-                  )}
 
-                  <div className="stop-sheet-actions">
-                    <button
-                      className="stop-sheet-reload"
-                      onClick={loadData}
-                      disabled={loading}
-                      title={t("estimates.reload", "Recargar estimaciones")}
-                    >
-                      <RefreshCw
-                        className={`reload-icon ${loading ? "spinning" : ""}`}
-                      />
-                      {t("estimates.reload", "Recargar")}
-                    </button>
-
-                    <Link
-                      to={`/estimates/${stop.stopId}`}
-                      className="stop-sheet-view-all"
-                      onClick={onClose}
-                    >
-                      {t(
-                        "map.view_all_estimates",
-                        "Ver todas las estimaciones",
-                      )}
-                    </Link>
-                  </div>
-                </div>
               </>
             ) : null}
           </div>
+
+          <div className="stop-sheet-footer">
+            {lastUpdated && (
+              <div className="stop-sheet-timestamp">
+                {t("estimates.last_updated", "Actualizado a las")}{" "}
+                {lastUpdated.toLocaleTimeString(undefined, {
+                  hour: "2-digit",
+                  minute: "2-digit",
+                  second: "2-digit",
+                })}
+              </div>
+            )}
+
+            <div className="stop-sheet-actions">
+              <button
+                className="stop-sheet-reload"
+                onClick={loadData}
+                disabled={loading}
+                title={t("estimates.reload", "Recargar estimaciones")}
+              >
+                <RefreshCw
+                  className={`reload-icon ${loading ? "spinning" : ""}`}
+                />
+                {t("estimates.reload", "Recargar")}
+              </button>
+
+              <Link
+                to={`/estimates/${stop.stopId}`}
+                className="stop-sheet-view-all"
+                onClick={onClose}
+              >
+                {t(
+                  "map.view_all_estimates",
+                  "Ver todas las estimaciones",
+                )}
+              </Link>
+            </div>
+          </div>
         </Sheet.Content>
       </Sheet.Container>
       <Sheet.Backdrop onTap={onClose} />
-- 
cgit v1.3