From a2a9c57724e32d82c0275e3668926fc6aa0978e6 Mon Sep 17 00:00:00 2001
From: laurentketterle-hub <laurentketterle@gmail.com>
Date: Tue, 4 Aug 2026 03:48:01 +0200
Subject: [PATCH] fix(#251): make deposit/withdraw modals responsive on mobile

Reduce padding on mobile and prevent horizontal overflow so
form fields stay visible and the submit button is reachable
without horizontal scrolling.
---
 src/screens/Deposit.tsx  |  2 +-
 src/screens/Withdraw.tsx |  2 +-
 src/styles/shell.css     | 13 +++++++++++++
 3 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/screens/Deposit.tsx b/src/screens/Deposit.tsx
index 27ca1d1..769d8b6 100644
--- a/src/screens/Deposit.tsx
+++ b/src/screens/Deposit.tsx
@@ -65,7 +65,7 @@ export function Deposit({ onDone }: DepositProps) {
   const balance = 240
 
   return (
-    <main id="main-content" style={{ maxWidth: 520, margin: '0 auto', padding: '48px 24px 80px' }}>
+    <main id="main-content" className="hb-deposit-main" style={{ maxWidth: 520, margin: '0 auto' }}>
       <Stepper step={step} />
 
       {step === 'amount' && (
diff --git a/src/screens/Withdraw.tsx b/src/screens/Withdraw.tsx
index 0d3df41..14d8442 100644
--- a/src/screens/Withdraw.tsx
+++ b/src/screens/Withdraw.tsx
@@ -53,7 +53,7 @@ export function Withdraw({ onDone, onBack }: WithdrawProps) {
   const n = parseFloat(amount) || 0
 
   return (
-    <main id="main-content" style={{ maxWidth: 520, margin: '0 auto', padding: '48px 24px 80px' }}>
+    <main id="main-content" className="hb-deposit-main" style={{ maxWidth: 520, margin: '0 auto' }}>
       {step === 'amount' && (
         <div style={panel}>
           <h1 style={hw}>{t('h1')}</h1>
diff --git a/src/styles/shell.css b/src/styles/shell.css
index ba44c07..c82472b 100644
--- a/src/styles/shell.css
+++ b/src/styles/shell.css
@@ -277,3 +277,16 @@
     background: var(--ink-06);
   }
 }
+
+/* --- Deposit/Withdraw responsive ------------------------------------------ */
+.hb-deposit-main {
+  padding: 48px 24px 80px;
+}
+
+@media (max-width: 640px) {
+  .hb-deposit-main {
+    padding: 24px 16px 64px;
+    max-width: 100vw;
+    overflow-x: hidden;
+  }
+}