bug(search): Restored search on mobile layout (#17123)

## DESCRIBE YOUR PR
Search was missing from the mobile layout. This brings it back. 

## IS YOUR CHANGE URGENT?  

Help us prioritize incoming PRs by letting us know when the change needs
to go live.
- [x] Urgent deadline (GA date, etc.): ASAP 
- [ ] Other deadline: <!-- ENTER DATE HERE -->
- [ ] None: Not urgent, can wait up to 1 week+

## SLA

- Teamwork makes the dream work, so please add a reviewer to your PRs.
- Please give the docs team up to 1 week to review your PR unless you've
added an urgent due date to it.
Thanks in advance for your help!

## PRE-MERGE CHECKLIST

*Make sure you've checked the following before merging your changes:*

- [ ] Checked Vercel preview for correctness, including links
- [ ] PR was reviewed and approved by any necessary SMEs (subject matter
experts)
- [ ] PR was reviewed and approved by a member of the [Sentry docs
team](https://github.com/orgs/getsentry/teams/docs)

---------

Co-authored-by: Shannon Anahata <shannonanahata@gmail.com>

Author: sfanahata

src/components/header.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import {Cross1Icon, HamburgerMenuIcon} from '@radix-ui/react-icons';
+import {Cross1Icon, HamburgerMenuIcon, MagnifyingGlassIcon} from '@radix-ui/react-icons';
 import {Button} from '@radix-ui/themes';
 import dynamic from 'next/dynamic';
 import Image from 'next/image';
@@ -51,6 +51,7 @@ export function Header({
   const [homeSearchVisible, setHomeSearchVisible] = useState(true);
   const [homeMobileNavOpen, setHomeMobileNavOpen] = useState(false);
   const [sidebarOpen, setSidebarOpen] = useState(false);
+  const [mobileSearchOpen, setMobileSearchOpen] = useState(false);
 
   // Listen for home search visibility changes
   useHomeSearchVisibility(
@@ -59,6 +60,48 @@ export function Header({
     }, [])
   );
 
+  // Close mobile search overlay on navigation
+  useEffect(() => {
+    setMobileSearchOpen(false);
+  }, [pathname]);
+
+  // Lock body scroll when mobile search overlay is open, close on resize to desktop or escape key
+  useEffect(() => {
+    if (mobileSearchOpen) {
+      document.body.style.overflow = 'hidden';
+
+      // Close mobile search if viewport is resized to desktop width
+      const handleResize = () => {
+        if (window.innerWidth >= 768) {
+          setMobileSearchOpen(false);
+        }
+      };
+
+      // Close mobile search on escape key (only if search input is empty)
+      const handleKeyDown = (e: KeyboardEvent) => {
+        if (e.key === 'Escape') {
+          // Check if search input has a value - if so, let the Search component
+          // handle the escape key to clear the query first
+          const searchInput = document.querySelector(
+            '.mobile-search-overlay input[type="text"]'
+          ) as HTMLInputElement | null;
+          if (!searchInput?.value) {
+            setMobileSearchOpen(false);
+          }
+        }
+      };
+
+      window.addEventListener('resize', handleResize);
+      window.addEventListener('keydown', handleKeyDown);
+      return () => {
+        document.body.style.overflow = '';
+        window.removeEventListener('resize', handleResize);
+        window.removeEventListener('keydown', handleKeyDown);
+      };
+    }
+    return undefined;
+  }, [mobileSearchOpen]);
+
   // Track sidebar checkbox state for non-home pages
   useEffect(() => {
     if (isHomePage) {
@@ -109,7 +152,10 @@ export function Header({
           {isHomePage ? (
             <button
               className="md:hidden mr-3 flex items-center"
-              onClick={() => setHomeMobileNavOpen(!homeMobileNavOpen)}
+              onClick={() => {
+                setHomeMobileNavOpen(!homeMobileNavOpen);
+                setMobileSearchOpen(false);
+              }}
               aria-label={homeMobileNavOpen ? 'Close menu' : 'Open menu'}
             >
               {homeMobileNavOpen ? (
@@ -171,8 +217,20 @@ export function Header({
           <div className="hidden md:block flex-1 min-w-0">
             <TopNavClient platforms={platforms} />
           </div>
-          {/* Mobile: show Ask AI button and theme toggle (below md breakpoint) */}
+          {/* Mobile: show search, Ask AI button and theme toggle (below md breakpoint) */}
           <div className="flex items-center md:hidden ml-auto gap-3">
+            {!noSearch && (
+              <button
+                className="flex items-center text-[var(--foreground)] p-1.5 rounded-md hover:bg-[var(--gray-a3)] transition-colors"
+                onClick={() => {
+                  setMobileSearchOpen(true);
+                  setHomeMobileNavOpen(false);
+                }}
+                aria-label="Search"
+              >
+                <MagnifyingGlassIcon width="20" height="20" />
+              </button>
+            )}
             <button
               className="kapa-ai-class flex items-center gap-1.5 text-sm font-medium text-[var(--foreground)] px-2 py-1.5 rounded-md hover:bg-[var(--gray-a3)] transition-colors"
               aria-label="Ask AI"
@@ -253,6 +311,38 @@ export function Header({
           </nav>
         </div>
       )}
+
+      {/* Mobile search overlay */}
+      {mobileSearchOpen && (
+        <div
+          className="mobile-search-overlay md:hidden fixed inset-0 bg-[var(--gray-1)] z-50 overflow-hidden flex flex-col"
+          style={{top: 'var(--header-height)'}}
+          // Stop propagation to prevent Search's useOnClickOutside from dismissing results
+          // when clicking on the overlay header or padding areas
+          onClick={e => e.stopPropagation()}
+        >
+          <div className="flex flex-col flex-1 overflow-hidden px-4">
+            <div className="flex items-center gap-2 py-4">
+              <button
+                onClick={() => setMobileSearchOpen(false)}
+                className="flex items-center justify-center p-2 rounded-md hover:bg-[var(--gray-a3)] transition-colors"
+                aria-label="Close search"
+              >
+                <Cross1Icon width="20" height="20" />
+              </button>
+              <span className="text-sm font-medium text-[var(--foreground)]">Search</span>
+            </div>
+            <div className="flex-1 overflow-auto">
+              <Search
+                path={pathname}
+                searchPlatforms={searchPlatforms}
+                autoFocus
+                useStoredSearchPlatforms={useStoredSearchPlatforms}
+              />
+            </div>
+          </div>
+        </div>
+      )}
     </header>
   );
 }

src/components/search/search.module.scss

@@ -76,6 +76,11 @@
     box-shadow 0.15s ease-in-out,
     min-width 0.3s ease-in-out;
 
+  // Prevent Safari from zooming in on input focus (requires 16px minimum)
+  @media screen and (max-width: 768px) {
+    font-size: 16px;
+  }
+
   &:focus {
     outline: 0;
     border-color: var(--accent-purple);
@@ -124,10 +129,19 @@
   border: 1px solid var(--gray-a3);
 
   @media screen and (max-width: 768px) {
-    width: calc(100vw - 4 * 1rem);
+    width: calc(100vw - 2rem);
     left: auto;
   }
 
+  // Scoped styles for mobile search overlay in header
+  :global(.mobile-search-overlay) & {
+    position: relative;
+    width: 100%;
+    max-height: none;
+    margin-top: 0.5rem;
+    border-radius: 0.75rem;
+  }
+
   :global(.dark) & {
     background-color: var(--gray-2);
     box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.4), 0 2px 8px 0 rgba(0, 0, 0, 0.3);