From a5bddb19f384f56db42de633990180a07ccb0eeb Mon Sep 17 00:00:00 2001
From: JakeSCahill <jake@redpanda.com>
Date: Tue, 23 Jun 2026 08:54:19 +0100
Subject: [PATCH] Fix mobile search overflow and replace ADP home GIF with
 video

- Add flex-wrap to the search autocomplete header (.aa-Header) so the
  context dropdown, Exact match toggle, and Ask AI button wrap instead
  of overflowing on mobile; wrap the standalone /search controls too.
- Replace the 4.3 MB adp-infographic.gif on the home page with a
  <video> (WebM + MP4 fallback) and a lightweight JPG poster, cutting
  the home page LCP payload by ~98%.
- Tidy pre-existing CSS (nav-toggle filter removals across home,
  component-home-v3, data-platform, labs-home, toolbar).

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
---
 src/css/component-home-v3.css |  5 -----
 src/css/data-platform.css     |  5 -----
 src/css/home.css              |  8 ++------
 src/css/labs-home.css         |  5 -----
 src/css/search.css            |  9 +++++++++
 src/css/toolbar.css           |  5 -----
 src/partials/home.hbs         | 12 +++++++++++-
 7 files changed, 22 insertions(+), 27 deletions(-)

diff --git a/src/css/component-home-v3.css b/src/css/component-home-v3.css
index aafdebc7..5e8df7f1 100644
--- a/src/css/component-home-v3.css
+++ b/src/css/component-home-v3.css
@@ -19,11 +19,6 @@
   }
 }
 
-/* Mobile nav toggle: invert to white on dark hero background */
-.component-home .nav-toggle {
-  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(105%) contrast(101%);
-}
-
 /* Hide all icons on landing pages */
 .ch3-path-icon,
 .ch3-deploy-icon,
diff --git a/src/css/data-platform.css b/src/css/data-platform.css
index c507fc58..f0096a38 100644
--- a/src/css/data-platform.css
+++ b/src/css/data-platform.css
@@ -2,11 +2,6 @@
    This page serves as the umbrella landing for Self-managed, Cloud, and Connect docs.
    =================================================================================== */
 
-/* Mobile nav toggle: invert to white on dark hero background */
-.data-platform .nav-toggle {
-  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(105%) contrast(101%);
-}
-
 /* Hide all icons on landing page */
 .dp-product-bullet-icon,
 .dp-popular-icon {
diff --git a/src/css/home.css b/src/css/home.css
index 55319e44..43195da2 100644
--- a/src/css/home.css
+++ b/src/css/home.css
@@ -2,11 +2,6 @@ body.article.home {
   background-color: var(--home-background);
 }
 
-/* Mobile nav toggle: invert to white on dark hero background */
-body.article.home .nav-toggle {
-  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(105%) contrast(101%);
-}
-
 /* Layout: full-width content area for home page */
 /* Higher specificity selector to override main > .content (main.css:52-64) */
 main.article.home > .content {
@@ -547,7 +542,8 @@ html[data-theme="dark"] .home-intent-card-visual {
   background: rgba(255, 255, 255, 0.03);
 }
 
-.home-intent-card-visual img {
+.home-intent-card-visual img,
+.home-intent-card-visual video {
   max-width: 100%;
   height: auto;
   display: block;
diff --git a/src/css/labs-home.css b/src/css/labs-home.css
index 0f871dec..c48899ed 100644
--- a/src/css/labs-home.css
+++ b/src/css/labs-home.css
@@ -3,11 +3,6 @@
    Styling for the Labs landing page with hero, filters, and card grid
    ============================================================================= */
 
-/* Mobile nav toggle: invert to white on dark hero background */
-.labs-wrap .nav-toggle {
-  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(105%) contrast(101%);
-}
-
 /* Labs page wrapper */
 .labs-wrap {
   background: var(--body-background);
diff --git a/src/css/search.css b/src/css/search.css
index ee1e63a7..b4fcb324 100644
--- a/src/css/search.css
+++ b/src/css/search.css
@@ -263,6 +263,7 @@ article.search .ais-Heading > a {
 .aa-Header {
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   align-items: center;
   gap: 12px;
   padding: 12px;
@@ -654,6 +655,14 @@ li.aa-Item:not([id*=filters]) {
     display: flex;
   }
 
+  article.search .ais-InstantSearch .container {
+    flex-wrap: wrap;
+  }
+
+  article.search .searchbox {
+    flex: 1 1 100%;
+  }
+
   article.search .ais-Hits {
     padding: 25px;
   }
diff --git a/src/css/toolbar.css b/src/css/toolbar.css
index 8a2b9e16..68eda2c9 100644
--- a/src/css/toolbar.css
+++ b/src/css/toolbar.css
@@ -32,11 +32,6 @@ html[data-theme=dark] .nav-toggle {
   filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(105%) contrast(101%);
 }
 
-/* Landing pages have dark backgrounds in light mode - invert nav toggle icon */
-.home .nav-toggle {
-  filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(248deg) brightness(105%) contrast(101%);
-}
-
 @media screen and (min-width: 1024px) {
   .nav-toggle {
     display: none;
diff --git a/src/partials/home.hbs b/src/partials/home.hbs
index 3c2565fd..2e2af1a3 100644
--- a/src/partials/home.hbs
+++ b/src/partials/home.hbs
@@ -78,7 +78,17 @@
 
         {{!-- ADP Visual --}}
         <div class="home-intent-card-visual">
-          <img src="./_images/adp-infographic.gif" alt="Agentic Data Plane infographic" />
+          <video
+            class="home-intent-card-video"
+            width="960" height="320"
+            autoplay loop muted playsinline
+            preload="metadata"
+            poster="./_images/adp-infographic-poster.jpg"
+            aria-label="Agentic Data Plane infographic"
+          >
+            <source src="./_images/adp-infographic.webm" type="video/webm" />
+            <source src="./_images/adp-infographic.mp4" type="video/mp4" />
+          </video>
         </div>
 
         {{!-- Quick Links --}}