From b302ca38987d1e0922c54c5fa8ee80738cf6e2c1 Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Wed, 17 Jul 2024 13:13:45 +0100
Subject: [PATCH] Temporarily disable search on mobile until we figure what the
 issue is

---
 packages/ui/src/header/mobile-menu.tsx | 16 +++++++++++-----
 packages/ui/src/search/index.tsx       |  2 ++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/header/mobile-menu.tsx b/packages/ui/src/header/mobile-menu.tsx
index 2e6aae07..1b96335b 100644
--- a/packages/ui/src/header/mobile-menu.tsx
+++ b/packages/ui/src/header/mobile-menu.tsx
@@ -1,15 +1,17 @@
-import type { FC, ReactNode } from 'react';
+'use client';
+
+import { type FC, type ReactNode } from 'react';
 import { MenuIcon } from '@storybook/icons';
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import { cn } from '@repo/utils';
-import { Search } from '../search';
+// import { Search } from '../search';
 import { Arrow } from './arrow';
 import { nav } from './nav';
 import type { HeaderProps } from '.';
 
 export const MobileMenu = ({
-  algoliaApiKey,
+  // algoliaApiKey,
   variant,
 }: {
   algoliaApiKey: string;
@@ -44,12 +46,16 @@ export const MobileMenu = ({
         >
           <ScrollArea.Root className="ui-w-full ui-h-full" type="always">
             <ScrollArea.Viewport className="ui-w-full ui-h-full ui-p-4 md:ui-p-2 md:ui-py-3">
-              <Search
+              {/* 
+                TODO: Bring back search on mobile. For some reason
+                the menu is getting over it and we can't type.
+              */}
+              {/* <Search
                 algoliaApiKey={algoliaApiKey}
                 className="ui-hidden max-[440px]:ui-block"
                 isMobile
                 variant={variant}
-              />
+              /> */}
               {nav.map((item) => (
                 <DropdownItem
                   external={item.external}
diff --git a/packages/ui/src/search/index.tsx b/packages/ui/src/search/index.tsx
index 5e212ce3..47d0a96a 100644
--- a/packages/ui/src/search/index.tsx
+++ b/packages/ui/src/search/index.tsx
@@ -32,6 +32,8 @@ export const Search: FC<SearchProps> = ({
     <div
       className={cn(
         '[&_.DocSearch-Button]:ui-bg-transparent',
+        '[&_.DocSearch-Button]:max-[440px]:ui-bg-slate-100',
+        '[&_.DocSearch-Button]:max-[440px]:ui-w-full',
         '[&_.DocSearch-Button]:ui-rounded-full',
         '[&_.DocSearch-Button]:ui-h-8',
         '[&_.DocSearch-Button]:ui-px-3',