From f70d8af2b2904c8b4b85984acb365b7945957f27 Mon Sep 17 00:00:00 2001
From: krusty-agent <krusty-agent@users.noreply.github.com>
Date: Tue, 10 Feb 2026 09:02:28 -0800
Subject: [PATCH] fix: mobile scrolling issues - remove nested scroll
 containers and horizontal overflow

- Remove redundant overflow-y-auto from ListView (was nested inside main's scroll)
- Remove deprecated -webkit-overflow-scrolling: touch inline style and CSS rule
- Add overflow-x-hidden to main content, Panel content, and ItemDetailsModal
- Add overscroll-y-contain and touch-action on main for native-feeling scroll
- Add flex layout to #root for proper height propagation
- Simplify overscroll-behavior CSS to just contain child scroll containers

Fixes: weird scrolling feel on mobile and horizontal scroll in Edit Item panel
---
 src/App.tsx                         |  2 +-
 src/components/ItemDetailsModal.tsx |  2 +-
 src/components/ui/Panel.tsx         |  2 +-
 src/index.css                       | 10 ++++------
 src/pages/ListView.tsx              |  3 +--
 5 files changed, 8 insertions(+), 11 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 22da7b9..29ead4b 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -98,7 +98,7 @@ function AuthenticatedLayout({ children }: { children: React.ReactNode }) {
       </header>
 
       {/* Main content */}
-      <main id="main-content" className="container mx-auto px-4 py-6 safe-area-inset-bottom flex-1 overflow-y-auto">
+      <main id="main-content" className="container mx-auto px-4 py-6 safe-area-inset-bottom flex-1 overflow-y-auto overflow-x-hidden overscroll-y-contain" style={{ touchAction: "pan-y pinch-zoom" }}>
         <ErrorBoundary>{children}</ErrorBoundary>
       </main>
 
diff --git a/src/components/ItemDetailsModal.tsx b/src/components/ItemDetailsModal.tsx
index 33866d9..17409af 100644
--- a/src/components/ItemDetailsModal.tsx
+++ b/src/components/ItemDetailsModal.tsx
@@ -145,7 +145,7 @@ export function ItemDetailsModal({
       ariaLabelledBy="item-details-title"
     >
       {/* Content */}
-      <div className="p-5 space-y-4">
+      <div className="p-5 space-y-4 overflow-x-hidden">
         {/* Name */}
         <div>
           <label className="block text-xs font-medium text-gray-500 dark:text-gray-400 mb-1">
diff --git a/src/components/ui/Panel.tsx b/src/components/ui/Panel.tsx
index b113d5e..dd06802 100644
--- a/src/components/ui/Panel.tsx
+++ b/src/components/ui/Panel.tsx
@@ -206,7 +206,7 @@ export function Panel({
         {/* Content */}
         <div
           ref={contentRef}
-          className="flex-1 overflow-y-auto"
+          className="flex-1 overflow-y-auto overflow-x-hidden overscroll-contain"
         >
           {children}
         </div>
diff --git a/src/index.css b/src/index.css
index 6a01c5a..762bbcc 100644
--- a/src/index.css
+++ b/src/index.css
@@ -26,6 +26,8 @@ body {
 
 #root {
   height: 100%;
+  display: flex;
+  flex-direction: column;
   overflow: hidden;
 }
 
@@ -41,14 +43,10 @@ html, body {
   overscroll-behavior-y: none;
 }
 
-/* Enable smooth momentum scrolling on iOS for all scrollable containers */
+/* Contain overscroll for scrollable containers — prevents parent scroll bleed */
 .overflow-auto,
 .overflow-y-auto,
-.overflow-x-auto,
-[style*="overflow: auto"],
-[style*="overflow-y: auto"],
-[style*="overflow-x: auto"] {
-  -webkit-overflow-scrolling: touch;
+.overflow-x-auto {
   overscroll-behavior-y: contain;
 }
 
diff --git a/src/pages/ListView.tsx b/src/pages/ListView.tsx
index 8563239..6aad9e7 100644
--- a/src/pages/ListView.tsx
+++ b/src/pages/ListView.tsx
@@ -605,8 +605,7 @@ export function ListView() {
   return (
     <div
       ref={pullRef}
-      className="max-w-3xl mx-auto overflow-y-auto overscroll-contain"
-      style={{ WebkitOverflowScrolling: "touch" }}
+      className="max-w-3xl mx-auto"
     >
       {/* Pull-to-refresh indicator */}
       <PullToRefreshIndicator pullDistance={pullDistance} isRefreshing={isRefreshing} />