From 5b75321406a698e7df159edb5f34d595cd6e778b Mon Sep 17 00:00:00 2001
From: Ichitux <toninu1989@gmail.com>
Date: Sat, 27 Jun 2026 13:16:44 +0200
Subject: [PATCH] fix(mobile): lock viewport, disable iOS bounce, fix 100vh
 reflow

Root cause: html/body had no height/overflow constraint, so the
webview allowed rubber-band overscroll. .app used min-height: 100vh
which on iOS resolves to the larger viewport (behind URL bar), causing
layout to reflow when the bar collapses.

- index.css: html/body locked to 100% height, overflow hidden,
  overscroll-behavior none; #root set to exact 100dvh
- App.css: .app height: 100dvh (was min-height: 100vh) with
  overflow-y: auto + overscroll-behavior: contain so the .app
  becomes the scroll container
- capacitor.config.json: ios.bounces false, contentInset never

Co-Authored-By: Claude <noreply@anthropic.com>
---
 capacitor.config.json  |  3 ++-
 frontend/src/App.css   |  4 +++-
 frontend/src/index.css | 18 +++++++-----------
 3 files changed, 12 insertions(+), 13 deletions(-)

diff --git a/capacitor.config.json b/capacitor.config.json
index 0e5874c..81b52aa 100644
--- a/capacitor.config.json
+++ b/capacitor.config.json
@@ -6,7 +6,8 @@
     "androidScheme": "https"
   },
   "ios": {
-    "contentInset": "always"
+    "contentInset": "never",
+    "bounces": false
   },
   "android": {
     "allowMixedContent": false
diff --git a/frontend/src/App.css b/frontend/src/App.css
index 2b5129f..248fe3c 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1,5 +1,7 @@
 .app {
-  min-height: 100vh;
+  height: 100dvh;
+  overflow-y: auto;
+  overscroll-behavior: contain;
   padding: 3rem 1.5rem;
   max-width: 1000px;
   margin: 0 auto;
diff --git a/frontend/src/index.css b/frontend/src/index.css
index b764d41..fb24c16 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -34,15 +34,14 @@
   box-sizing: border-box;
 }
 
-html {
+html, body {
+  height: 100%;
+  overflow: hidden;
   overscroll-behavior: none;
+}
+html {
   overflow-x: clip;
 }
-
-body {
-  overflow-x: hidden;
-}
-
 body {
   font-family: 'Outfit', system-ui, sans-serif;
   color: var(--text-main);
@@ -53,13 +52,10 @@ body {
   background-size: cover;
   background-position: center;
   background-attachment: fixed;
-  min-height: 100svh;
-  min-height: 100dvh;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
-
 #root {
-  min-height: 100svh;
-  min-height: 100dvh;
+  height: 100dvh;
+  overflow: hidden;
 }