From f05a21dcfcf504f7b751a3f7cebd0a0406b2688f Mon Sep 17 00:00:00 2001
From: Krusty Agent <krusty-agent@users.noreply.github.com>
Date: Tue, 10 Feb 2026 06:04:18 -0800
Subject: [PATCH] Fix mobile scrolling issues

- Remove nested scroll container (overflow-hidden parent + overflow-y-auto main)
- Let body scroll naturally for native mobile feel
- Remove deprecated -webkit-overflow-scrolling from inline styles
- Add touch-action: pan-y pinch-zoom for better touch handling
- Add proper #root flex layout for consistent height
- Keep overscroll-behavior: none to prevent rubber-banding

These changes eliminate the 'weird' scrolling behavior on mobile by
simplifying the scroll container hierarchy and letting the browser
handle scrolling natively.
---
 src/App.tsx   |  4 ++--
 src/index.css | 19 +++++++++++++++----
 2 files changed, 17 insertions(+), 6 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index e9fe09a..96e10ce 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -33,7 +33,7 @@ function AuthenticatedLayout({ children }: { children: React.ReactNode }) {
   const [isSettingsOpen, setIsSettingsOpen] = useState(false);
 
   return (
-    <div className="min-h-screen flex flex-col bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-950 transition-colors overflow-hidden">
+    <div className="min-h-screen flex flex-col bg-gradient-to-b from-gray-50 to-gray-100 dark:from-gray-900 dark:to-gray-950 transition-colors">
       {/* Skip to main content link */}
       <a
         href="#main-content"
@@ -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 overscroll-contain" style={{ WebkitOverflowScrolling: "touch" }}>
+      <main id="main-content" className="container mx-auto px-4 py-6 safe-area-inset-bottom flex-1">
         <ErrorBoundary>{children}</ErrorBoundary>
       </main>
 
diff --git a/src/index.css b/src/index.css
index f453e33..36c90e7 100644
--- a/src/index.css
+++ b/src/index.css
@@ -12,13 +12,22 @@
 }
 
 /* Apply to the main layout */
+html {
+  /* Prevent overscroll bounce on iOS — keeps app feeling native */
+  overscroll-behavior-y: none;
+  /* Smooth momentum scrolling on iOS */
+  -webkit-overflow-scrolling: touch;
+}
+
 body {
   padding-top: var(--safe-area-top);
   padding-bottom: var(--safe-area-bottom);
-  /* Prevent overscroll bounce on iOS — keeps app feeling native */
+  /* Prevent overscroll bounce on iOS */
   overscroll-behavior: none;
   /* Use dvh for proper mobile viewport (accounts for browser chrome) */
   min-height: 100dvh;
+  /* Enable smooth touch scrolling */
+  touch-action: pan-y pinch-zoom;
 }
 
 /* Prevent iOS Safari input zoom — inputs must be >= 16px */
@@ -28,9 +37,11 @@ body {
   }
 }
 
-/* Prevent pull-to-refresh in native WebView */
-html, body {
-  overscroll-behavior-y: none;
+/* Ensure root container takes full height for proper flex layout */
+#root {
+  min-height: 100dvh;
+  display: flex;
+  flex-direction: column;
 }
 
 /* Custom animations */