From 8d4fe60f28083c3a19f4a7c72c7b256e6958e84d Mon Sep 17 00:00:00 2001
From: "Najjar\\NajjarV02" <mglnaj6>
Date: Thu, 21 May 2026 17:41:06 +0400
Subject: [PATCH] fix: BentoGrid flagship tile mobile overlap

Robot image and text overlapped on mobile because image was
absolutely positioned over the full card while text was max-width 50%.
Refactored to stacked flex layout below 900px (copy on top, image
below in own region), original side-by-side layout preserved at
desktop via media query.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/components/robotics/BentoGrid.tsx    | 76 +++++++++++++++++-------
 src/components/robotics/CompanyStory.tsx | 10 +++-
 2 files changed, 65 insertions(+), 21 deletions(-)

diff --git a/src/components/robotics/BentoGrid.tsx b/src/components/robotics/BentoGrid.tsx
index b4a81ba..b270ce1 100644
--- a/src/components/robotics/BentoGrid.tsx
+++ b/src/components/robotics/BentoGrid.tsx
@@ -22,26 +22,28 @@ export function BentoGrid() {
       }}
     >
       <Tile col="span 7" row="span 2" accent="#DEE0F0">
-        <div style={{ position: 'absolute', inset: 0 }}>
-          <Image
-            src={FEATURED_ROBOTS[0].image}
-            alt="Premium robotics in Dubai"
-            fill
-            sizes="(max-width: 768px) 100vw, 60vw"
-            style={{ objectFit: 'contain', objectPosition: 'right center', padding: 'clamp(1.5rem, 4vw, 3rem)', opacity: 0.92 }}
-          />
-        </div>
-        <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', gap: '0.75rem', maxWidth: '50%' }}>
-          <span className="eyebrow">Flagship · Dubai</span>
-          <h3 style={{ margin: 0, fontSize: 'clamp(1.4rem, 2.6vw, 2rem)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
-            <span className="text-gradient">Unitree G1 humanoid live in our Dubai showroom.</span>
-          </h3>
-          <p style={{ margin: 0, color: '#DEE0F0', fontSize: '0.92rem', lineHeight: 1.6 }}>
-            Configure persona, attire, and accessories. Then book a live demo.
-          </p>
-          <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginTop: '0.5rem' }}>
-            <Link href="/robots/unitree-g1/" className="btn btn-primary" style={{ padding: '0.65rem 1.1rem', fontSize: '0.75rem' }}>View G1</Link>
-            <Link href="/configure/" className="btn btn-ghost" style={{ padding: '0.65rem 1.1rem', fontSize: '0.75rem' }}>Configure</Link>
+        <div className="bento-flagship">
+          <div className="bento-flagship-copy">
+            <span className="eyebrow">Flagship · Dubai</span>
+            <h3 style={{ margin: 0, fontSize: 'clamp(1.4rem, 2.6vw, 2rem)', fontWeight: 500, letterSpacing: '-0.02em', lineHeight: 1.1 }}>
+              <span className="text-gradient">Unitree G1 humanoid live in our Dubai showroom.</span>
+            </h3>
+            <p style={{ margin: 0, color: '#DEE0F0', fontSize: '0.92rem', lineHeight: 1.6 }}>
+              Configure persona, attire, and accessories. Then book a live demo.
+            </p>
+            <div style={{ display: 'flex', gap: '0.5rem', flexWrap: 'wrap', marginTop: '0.4rem' }}>
+              <Link href="/robots/unitree-g1/" className="btn btn-primary" style={{ padding: '0.65rem 1.1rem', fontSize: '0.75rem' }}>View G1</Link>
+              <Link href="/configure/" className="btn btn-ghost" style={{ padding: '0.65rem 1.1rem', fontSize: '0.75rem' }}>Configure</Link>
+            </div>
+          </div>
+          <div className="bento-flagship-media">
+            <Image
+              src={FEATURED_ROBOTS[0].image}
+              alt="Premium robotics in Dubai"
+              fill
+              sizes="(max-width: 900px) 100vw, 60vw"
+              style={{ objectFit: 'contain', objectPosition: 'center center', padding: 'clamp(0.5rem, 2vw, 1.25rem)' }}
+            />
           </div>
         </div>
       </Tile>
@@ -117,6 +119,40 @@ export function BentoGrid() {
         @media (max-width: 540px) {
           .bento-tile-4 { grid-column: span 12 !important; }
         }
+
+        .bento-flagship {
+          position: relative;
+          display: flex;
+          flex-direction: column;
+          gap: 1rem;
+          width: 100%;
+          height: 100%;
+        }
+        .bento-flagship-copy {
+          position: relative;
+          z-index: 2;
+          display: flex;
+          flex-direction: column;
+          gap: 0.7rem;
+        }
+        .bento-flagship-media {
+          position: relative;
+          width: 100%;
+          min-height: 220px;
+          flex: 1;
+        }
+        @media (min-width: 900px) {
+          .bento-flagship { display: block; }
+          .bento-flagship-copy { max-width: 50%; }
+          .bento-flagship-media {
+            position: absolute;
+            top: 0;
+            right: 0;
+            bottom: 0;
+            left: 50%;
+            min-height: 0;
+          }
+        }
       `}</style>
     </div>
   );
diff --git a/src/components/robotics/CompanyStory.tsx b/src/components/robotics/CompanyStory.tsx
index b3de054..1593176 100644
--- a/src/components/robotics/CompanyStory.tsx
+++ b/src/components/robotics/CompanyStory.tsx
@@ -193,10 +193,10 @@ export function CompanyStory() {
 
         {/* Right capability modules */}
         <div
+          className="cs-pillars"
           style={{
             position: 'relative',
             display: 'grid',
-            gridTemplateColumns: 'repeat(2, minmax(0, 1fr))',
             gap: '0.875rem',
             minWidth: 0,
           }}
@@ -246,6 +246,14 @@ export function CompanyStory() {
             grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
           }
         }
+        .cs-pillars {
+          grid-template-columns: minmax(0, 1fr);
+        }
+        @media (min-width: 640px) {
+          .cs-pillars {
+            grid-template-columns: repeat(2, minmax(0, 1fr));
+          }
+        }
       `}</style>
     </div>
   );