From e9685651cf6fbab127c1655fac15444647adb445 Mon Sep 17 00:00:00 2001
From: Bruno Charest <bruno.charest@gmail.com>
Date: Wed, 3 Jun 2026 11:32:43 -0400
Subject: [PATCH] Fix: mobile help guide width overflow, box-sizing and
 max-width constraints

---
 frontend/style.css | 38 +++++++++++++++++++++++++++++++-------
 1 file changed, 31 insertions(+), 7 deletions(-)

diff --git a/frontend/style.css b/frontend/style.css
index 55d3f1c..6ebb95c 100644
--- a/frontend/style.css
+++ b/frontend/style.css
@@ -6426,11 +6426,14 @@ body.popup-mode .content-area {
 
 /* ── Help Modal: Mobile responsive ── */
 @media (max-width: 768px) {
-  .help-container {
-    max-width: 100%;
+  .help-container,
+  .editor-container.help-container {
+    max-width: 100vw;
+    width: 100vw;
     height: 100vh;
     max-height: 100vh;
     border-radius: 0;
+    box-sizing: border-box;
   }
 
   .help-hamburger {
@@ -6441,7 +6444,8 @@ body.popup-mode .content-area {
   .help-nav {
     position: static;
     width: 100%;
-    min-width: 100%;
+    min-width: 0;
+    max-width: 100%;
     max-height: none;
     height: auto;
     z-index: auto;
@@ -6451,7 +6455,8 @@ body.popup-mode .content-area {
     border-bottom: 1px solid var(--border);
     box-shadow: none;
     flex-shrink: 0;
-    display: none;  /* hidden by default on mobile */
+    display: none;
+    box-sizing: border-box;
   }
   .help-nav-header {
     padding: 10px 16px 6px;
@@ -6463,14 +6468,19 @@ body.popup-mode .content-area {
     overflow-y: auto;
     overflow-x: hidden;
     padding: 0;
+    width: 100%;
+    box-sizing: border-box;
   }
   .help-content {
-    padding: 14px 16px 40px;
+    padding: 14px 14px 40px;
     flex: 1;
     overflow-y: auto;
     overflow-x: hidden;
     -webkit-overflow-scrolling: touch;
     word-break: break-word;
+    width: 100%;
+    max-width: 100%;
+    box-sizing: border-box;
   }
   .help-content pre, .help-content code, .help-content table {
     max-width: 100%;
@@ -6481,14 +6491,28 @@ body.popup-mode .content-area {
     flex-direction: column;
     gap: 16px;
     min-width: 0;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 20px 16px;
+  }
+  .help-hero-copy {
+    min-width: 0;
+    width: 100%;
   }
-  .help-hero-copy { min-width: 0; }
   .help-badges {
     flex-wrap: wrap;
     gap: 6px;
   }
+  .help-badge {
+    white-space: normal;
+  }
   .help-hero-visual { display: none; }
-  .help-section { padding: 20px 0 16px; min-width: 0; }
+  .help-section {
+    padding: 20px 0 16px;
+    min-width: 0;
+    width: 100%;
+    box-sizing: border-box;
+  }
   .help-nav-link {
     padding: 10px 12px;
     font-size: 0.88rem;