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	88d5004
🔍 Latest deploy log	https://app.netlify.com/projects/docs-ui/deploys/6a43fd2899b62d00083351a1
😎 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: 33 (🟢 up 3 from production) Accessibility: 89 (no change from production) Best Practices: 92 (🟢 up 9 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]

Important

Review skipped

Auto incremental reviews are disabled on this repository.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 22551f5f-6415-4255-82a2-7ffa5342ae23

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 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

---

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.

[micheleRP]

Review — looks good, one accessibility suggestion.

Verified:

• home.hbs is the only consumer of adp-infographic.gif (grepped content repos + docs-ui code search), so the companion deletion in redpanda-data/docs-site#187 is safe.
• Asset paths (./_images/adp-infographic.*) resolve to home/modules/ROOT/images/, same as the old GIF.
• The .nav-toggle invert removal looks correct: --toolbar-background = --body-background = white in light mode, and the dark-theme invert is retained, so the removed light-mode rule was white-on-white. (A quick mobile light-mode spot check on landing pages wouldn't hurt.)

Suggestion (non-blocking): the <video autoplay loop muted> plays indefinitely with no pause, which trips WCAG 2.2.2 (auto-playing >5s looping content must be pausable). Not a regression — the GIF behaved the same — but since this is a Lighthouse/a11y-driven change, consider gating autoplay behind @media (prefers-reduced-motion: no-preference) so reduced-motion users just see the poster.