Temporarily disable search on mobile until we figure what the issue is

storybookjs · Jul 17, 2024 · b302ca3 · b302ca3
1 parent 3778ea5
commit b302ca3
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 5 deletions.
diff --git 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
@@ -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',