Fix mobile search overflow and replace ADP home GIF with video

[JakeSCahill]

What & why

Two issues from mobile testing + a Lighthouse audit of the home page.

1. Mobile search modal overflow

In the search autocomplete modal, the context dropdown, the Exact match toggle, and the Ask AI button sat on one non-wrapping row and overflowed horizontally on narrow screens.

• src/css/search.css: add flex-wrap: wrap to .aa-Header.
• Also wrap the standalone /search controls (.container wrap + full-width searchbox) inside the existing mobile media query.

2. Heavy animated GIF on the home page

adp-infographic.gif (~4.3 MB, 960×320) was the eager LCP element. Lighthouse flagged "Use video formats for animated content" (~3.96 MB potential saving) and "Properly size images".

• src/partials/home.hbs: replace the <img> with a <video autoplay loop muted playsinline preload="metadata" poster=...> (WebM source first, MP4 fallback).
• src/css/home.css: extend the visual sizing rule to also style video.

New assets (adp-infographic.webm 20 KB, .mp4 46 KB, -poster.jpg 19 KB) are added in the content repo (docs-site) — see companion PR. Both PRs must land together, since this bundle references files that must exist in content.

Net: ~4.3 MB → ~85 KB for the home page's largest asset (~98% reduction).

3. Minor CSS cleanup

Removes redundant .nav-toggle invert filters across home, component-home-v3, data-platform, labs-home, and toolbar.

Testing

Built the UI bundle, pointed a local docs-site playbook at it, ran npm run build-local, and verified in a browser:

• The ADP card renders and autoplays the WebM (960×320, decoded); poster shows pre-play; scales correctly at desktop and 390px.
• .aa-Header now has flex-wrap: wrap with no horizontal overflow at 390px/320px; controls wrap to new rows.
• gulp lint passes.

🤖 Generated with Claude Code

[netlify]

✅ Deploy Preview for docs-ui ready!

Name	Link
🔨 Latest commit	a5bddb1
🔍 Latest deploy log	https://app.netlify.com/projects/docs-ui/deploys/6a3a3bc37678770009383ddb
😎 Deploy Preview	https://deploy-preview-394--docs-ui.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 30 (🔴 down 1 from production) Accessibility: 89 (no change from production) Best Practices: 92 (no change from production) SEO: 89 (no change from production) PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify project configuration.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: fa563a26-52eb-424f-90d7-e5ce29b12390

📥 Commits

Reviewing files that changed from the base of the PR and between 408dacd and a5bddb1.

📒 Files selected for processing (7)

• src/css/component-home-v3.css
• src/css/data-platform.css
• src/css/home.css
• src/css/labs-home.css
• src/css/search.css
• src/css/toolbar.css
• src/partials/home.hbs

💤 Files with no reviewable changes (4)

• src/css/labs-home.css
• src/css/data-platform.css
• src/css/toolbar.css
• src/css/component-home-v3.css

---

📝 Walkthrough

Walkthrough

Five landing-page CSS files (toolbar.css, home.css, component-home-v3.css, data-platform.css, labs-home.css) have their per-page filter: invert(...) overrides for .nav-toggle removed. In home.hbs, the ADP infographic GIF is replaced with an autoplaying, looping, muted <video> element offering WebM and MP4 sources with a poster image and aria-label. The .home-intent-card-visual CSS selector in home.css is extended to include video alongside img. Additionally, search.css gains flex-wrap: wrap on .aa-Header and on the search container at ≤1024px breakpoint, with the searchbox set to full-width flex.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• redpanda-data/docs-ui#381: Previously added the exact nav-toggle filter: invert(...) rules across landing-page stylesheets that this PR removes.

Suggested reviewers

• paulohtb6
• kbatuigas

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the two main changes: fixing mobile search overflow and replacing an animated GIF with a video on the home page.
Description check	✅ Passed	The description is well-detailed and directly related to the changeset, explaining the what, why, and testing for all modifications across multiple CSS and template files.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix-mobile-search-wrap-and-adp-video

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

ESLint install failed. For unrecoverable errors, disable the tool in CodeRabbit configuration.

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[JakeSCahill]

Companion PR (content assets — adds the WebM/MP4/poster this bundle references): redpanda-data/docs-site#187

⚠️ Both PRs must merge together — this UI change references video files that only exist once #187 lands.