Fix safari background color for search and support smaller screens

Hiru Fernandorequested to merge
fix-header-background-safari into redesign-2025

What does this MR do and why?

WHAT

  • This MR fixes the missing background colors for landing page search section - specifically affects Safari browser.
  • Also fixes color gradient in smaller screens.

WHY

  • We have users that use Safari as their default browser so the colors should stay the same across all browsers.
  • Safari could not handle the level of filter blur pixel amount - so we need to lower it to support Safari.
  • Support mobile site's landing/search colors as well.

Screenshots, screen recordings, or links to review app

SCENARIO BEFORE AFTER
Mobile version on Safari mobile-safari-search-bg-not-fixed mobile-safari-search-bg-fixed
Safari on Desktop image image

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Configure a local GitLab Docs environment.
  2. Check out this branch.
  3. Resize screens in all supported browsers including Chrome, Firefox, and Safari. The gradients stop being uniform around <= 700px. No changes expected on Chrome and Firefox.

Merge request acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

Edited by Hiru Fernando

Merge request reports