From 4841f8d7857495bfa83191a8bf5afca9ca75a43b Mon Sep 17 00:00:00 2001
From: laurentketterle-hub <laurentketterle@gmail.com>
Date: Tue, 4 Aug 2026 03:47:00 +0200
Subject: [PATCH] fix(#252): add responsive padding to portfolio for mobile

Move portfolio padding to a CSS class with a mobile breakpoint
(640px) that reduces horizontal padding from 32px to 16px.
Prevents horizontal overflow on small screens.
---
 src/screens/Portfolio.tsx |  4 ++--
 src/styles/shell.css      | 11 +++++++++++
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/screens/Portfolio.tsx b/src/screens/Portfolio.tsx
index 9ccd8b0..d3da55b 100644
--- a/src/screens/Portfolio.tsx
+++ b/src/screens/Portfolio.tsx
@@ -26,7 +26,7 @@ export function Portfolio({ onWithdraw, onDeposit }: PortfolioProps) {
     return (
       <main
         id="main-content"
-        style={{ maxWidth: 1080, margin: '0 auto', padding: '48px 32px 80px' }}
+        className="hb-portfolio-main" style={{ maxWidth: 1080, margin: '0 auto' }}
       >
         <Card
           style={{
@@ -59,7 +59,7 @@ export function Portfolio({ onWithdraw, onDeposit }: PortfolioProps) {
   }
 
   return (
-    <main id="main-content" style={{ maxWidth: 1080, margin: '0 auto', padding: '48px 32px 80px' }}>
+    <main id="main-content" className="hb-portfolio-main" style={{ maxWidth: 1080, margin: '0 auto' }}>
       <div
         style={{
           display: 'flex',
diff --git a/src/styles/shell.css b/src/styles/shell.css
index ba44c07..6c52d7a 100644
--- a/src/styles/shell.css
+++ b/src/styles/shell.css
@@ -277,3 +277,14 @@
     background: var(--ink-06);
   }
 }
+
+/* --- Portfolio responsive ------------------------------------------------- */
+.hb-portfolio-main {
+  padding: 48px 32px 80px;
+}
+
+@media (max-width: 640px) {
+  .hb-portfolio-main {
+    padding: 24px 16px 64px;
+  }
+}