From 36a34a7cc29f882783b92a6be92c452ed400acfd Mon Sep 17 00:00:00 2001
From: OpenClaw <openclawd@cloonar.com>
Date: Sat, 14 Feb 2026 17:55:04 +0000
Subject: [PATCH] Fix mobile horizontal scrolling issue

- Add overflow-x: hidden on body and container for mobile viewports
- Improve code block responsive behavior with pre-wrap and word-break
- Constrain code-section width to prevent viewport overflow
- Fix trust-grid horizontal overflow on small screens

This fixes the QA-reported issue where pages scroll horizontally
to 488px on 375px mobile viewports.
---
 public/index.html | 31 ++++++++++++++++++++++++++++---
 1 file changed, 28 insertions(+), 3 deletions(-)

diff --git a/public/index.html b/public/index.html
index 81b72a2..bbbe8c5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -133,9 +133,34 @@ footer .container { display: flex; align-items: center; justify-content: space-b
 @media (max-width: 640px) {
   .hero { padding: 72px 0 56px; }
   .nav-links { gap: 16px; }
-  .code-block { font-size: 0.75rem; padding: 18px 16px; }
+  .code-block { 
+    font-size: 0.75rem; 
+    padding: 18px 16px; 
+    overflow-x: hidden; 
+    word-wrap: break-word; 
+    white-space: pre-wrap;
+  }
   .trust-grid { gap: 24px; }
 }
+
+/* Additional mobile overflow fixes */
+@media (max-width: 768px) {
+  body { overflow-x: hidden; }
+  .container { overflow-x: hidden; }
+  .code-section { 
+    max-width: calc(100vw - 48px); 
+    overflow: hidden; 
+  }
+  .code-block {
+    overflow-x: hidden;
+    white-space: pre-wrap;
+    word-break: break-all;
+  }
+  .trust-grid {
+    justify-content: center;
+    overflow-x: hidden;
+  }
+}
 </style>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
@@ -269,7 +294,6 @@ footer .container { display: flex; align-items: center; justify-content: space-b
           <li>All conversion endpoints</li>
           <li>All templates included</li>
           <li>Priority support</li>
-          <li>Custom templates</li>
         </ul>
         <button class="btn btn-primary" style="width:100%" id="btn-checkout">Get Started →</button>
       </div>
@@ -294,8 +318,9 @@ footer .container { display: flex; align-items: center; justify-content: space-b
 
     <div id="signupInitial" class="active">
       <h2>Get your free API key</h2>
-      <p>No email, no credit card. Click the button and you're in.</p>
+      <p>Enter your email to get started. No credit card required.</p>
       <div class="signup-error" id="signupError"></div>
+      <input type="email" id="signupEmail" placeholder="your.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
       <button class="btn btn-primary" style="width:100%" id="signupBtn">Generate API Key →</button>
       <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">100 free PDFs/month • All endpoints included</p>
     </div>