Fix scrolling on mobile finally!

2 files changed, 55 insertions, 47 deletions

diff --git a/src/frontend/app/components/StopSheet.css b/src/frontend/app/components/StopSheet.css
index 41dfbe0..31770a1 100644
--- a/src/frontend/app/components/StopSheet.css
+++ b/src/frontend/app/components/StopSheet.css
@@ -4,6 +4,15 @@
   touch-action: none;
 }
 
+/*.react-modal-sheet-content > * > *:not(.stop-sheet-actions){
+  interactivity: inert;
+}*/
+
+.react-modal-sheet-content-scroller {
+  overscroll-behavior-y: unset !important;
+  overflow-y: unset !important;
+}
+
 .stop-sheet-content {
   padding: 16px;
   display: flex;
@@ -45,7 +54,6 @@
   scrollbar-width: thin;
   gap: 0.5rem 1rem;
   overflow-x: scroll;
-  overflow-y: auto;
 }
 
 .stop-sheet-lines-container.scrollable::-webkit-scrollbar {
@@ -72,7 +80,6 @@
 
 .stop-sheet-estimates {
   flex: 1;
-  overflow-y: auto;
   min-height: 0;
   margin-block-start: 1.25rem;
 }
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} />