From c667736ee6bf9f0b3025b71ee4d3b6cd6af1cef6 Mon Sep 17 00:00:00 2001
From: "Najjar\\NajjarV02" <mglnaj6>
Date: Fri, 22 May 2026 10:10:09 +0400
Subject: [PATCH] fix: kill horizontal overflow on mobile
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add `overflow-x: clip` to main/section/header/footer/nav so decorative
absolutely-positioned glow elements (dcta-glow, brand-card-glow,
cap-tile-glow) can't bubble their bounds up to body.scrollWidth.
Without this, body extended ~168px past viewport at 360px width,
producing right-side empty gap and horizontal scroll on Android Chrome.

Also stack 2-col grids on narrow viewports in ExclusiveAccessSection,
FounderSection, and IndustryUseCases stats row to prevent cramped
or overflowing content under 640px.

Verified via Playwright at 320/360/375/390/411/414/480 — body.scrollWidth
now equals viewport at all widths.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/app/globals.css                           |  9 +++++++--
 .../robotics/ExclusiveAccessSection.tsx       | 10 +++++++++-
 src/components/robotics/FounderSection.tsx    | 13 ++++++++++++-
 src/components/robotics/IndustryUseCases.tsx  | 19 +++++++++----------
 4 files changed, 37 insertions(+), 14 deletions(-)

diff --git a/src/app/globals.css b/src/app/globals.css
index f52be2b..c85edff 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -74,15 +74,17 @@ html,
 body {
   margin: 0;
   padding: 0;
+  width: 100%;
+  max-width: 100%;
   min-height: 100vh;
   background-color: var(--color-bg);
   color: var(--color-text-primary);
   font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   overflow-x: hidden;
+  overflow-x: clip;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   direction: ltr !important;
-  unicode-bidi: isolate;
   text-align: left;
 }
 
@@ -713,7 +715,10 @@ html {
   .light-sweep { animation: none !important; opacity: 0 !important; }
 }
 
-html, body { overflow-x: hidden; max-width: 100vw; }
+html, body { overflow-x: hidden; overflow-x: clip; max-width: 100%; }
+
+/* Catch-all guard against horizontal overflow */
+main, footer, nav, section, header { max-width: 100%; overflow-x: clip; }
 
 /* === GLOBAL RESPONSIVE GUARDS === */
 
diff --git a/src/components/robotics/ExclusiveAccessSection.tsx b/src/components/robotics/ExclusiveAccessSection.tsx
index 039eb1d..59646a1 100644
--- a/src/components/robotics/ExclusiveAccessSection.tsx
+++ b/src/components/robotics/ExclusiveAccessSection.tsx
@@ -93,9 +93,9 @@ export function ExclusiveAccessSection() {
 
         {/* Right premium showroom grid */}
         <div
+          className="exa-tiles"
           style={{
             display: 'grid',
-            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
             gap: '0.875rem',
             minWidth: 0,
           }}
@@ -125,6 +125,14 @@ export function ExclusiveAccessSection() {
         .exa-grid {
           grid-template-columns: 1fr;
         }
+        .exa-tiles {
+          grid-template-columns: minmax(0, 1fr);
+        }
+        @media (min-width: 640px) {
+          .exa-tiles {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
+        }
         @media (min-width: 1024px) {
           .exa-grid {
             grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
diff --git a/src/components/robotics/FounderSection.tsx b/src/components/robotics/FounderSection.tsx
index 221a0ee..da8dd03 100644
--- a/src/components/robotics/FounderSection.tsx
+++ b/src/components/robotics/FounderSection.tsx
@@ -48,9 +48,9 @@ export function FounderSection() {
         </div>
 
         <div
+          className="fs-pillars"
           style={{
             display: 'grid',
-            gridTemplateColumns: 'repeat(2, 1fr)',
             gap: '1rem',
           }}
         >
@@ -60,6 +60,17 @@ export function FounderSection() {
           <Pillar value="Future" label="Smart, autonomous, intelligent" />
         </div>
       </div>
+
+      <style jsx>{`
+        .fs-pillars {
+          grid-template-columns: minmax(0, 1fr);
+        }
+        @media (min-width: 640px) {
+          .fs-pillars {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
+        }
+      `}</style>
     </div>
   );
 }
diff --git a/src/components/robotics/IndustryUseCases.tsx b/src/components/robotics/IndustryUseCases.tsx
index a4c11fb..a273bb4 100644
--- a/src/components/robotics/IndustryUseCases.tsx
+++ b/src/components/robotics/IndustryUseCases.tsx
@@ -61,14 +61,14 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
       <motion.ul
         className="iu-stats"
         role="list"
-        style={{ display: 'flex', flexDirection: 'row', flexWrap: 'nowrap', gap: '0.45rem', listStyle: 'none', margin: 0, padding: 0 }}
+        style={{ listStyle: 'none', margin: 0, padding: 0 }}
         initial={{ opacity: 0, y: 12 }}
         whileInView={{ opacity: 1, y: 0 }}
         viewport={{ once: true, margin: '-10%' }}
         transition={{ duration: 0.6, ease }}
       >
         {STATS.map((s) => (
-          <li key={s.label} className="iu-stat" style={{ flex: '1 1 0', minWidth: 0 }}>
+          <li key={s.label} className="iu-stat">
             <span className="iu-stat-value">{s.value}</span>
             <span className="iu-stat-label">{s.label}</span>
           </li>
@@ -90,15 +90,14 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
           gap: clamp(1.5rem, 3vw, 2.25rem);
         }
 
-        /* STATS — always single row */
+        /* STATS — single column on mobile, single row on tablet+ */
         .iu-stats {
           list-style: none;
           margin: 0 0 clamp(0.5rem, 1.5vw, 1rem);
           padding: 0;
           display: flex;
-          flex-direction: row;
-          flex-wrap: nowrap;
-          gap: 0.45rem;
+          flex-direction: column;
+          gap: 0.55rem;
         }
         .iu-stat {
           position: relative;
@@ -106,9 +105,9 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
           flex-direction: column;
           justify-content: center;
           gap: 0.22rem;
-          flex: 1;
+          flex: 1 1 0;
           min-width: 0;
-          padding: 0.6rem 0.55rem;
+          padding: 0.85rem 1rem;
           border-radius: 14px;
           border: 1px solid rgba(120, 140, 255, 0.22);
           background:
@@ -167,8 +166,8 @@ export function IndustryUseCases({ limit }: { limit?: number }) {
           position: relative;
           z-index: 1;
         }
-        @media (min-width: 520px) {
-          .iu-stats { gap: 0.6rem; }
+        @media (min-width: 640px) {
+          .iu-stats { flex-direction: row; flex-wrap: nowrap; gap: 0.6rem; }
           .iu-stat { padding: 0.72rem 0.85rem; gap: 0.28rem; border-radius: 16px; }
         }
         @media (min-width: 820px) {