fix(core): header overflow in mobile widths, remove search when small (…

…#875)
bigcommerce · May 7, 2024 · 78a5f08 · 78a5f08
1 parent 1c7f52f
commit 78a5f08
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 4 deletions.
diff --git a/.changeset/ten-shoes-work.md b/.changeset/ten-shoes-work.md
@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Fix header overflow in mobile, hide search when screen width is extra small."
diff --git a/core/components/header/index.tsx b/core/components/header/index.tsx
@@ -45,7 +45,10 @@ export const Header = async ({ cart, data }: Props) => {
     <header>
       <NavigationMenu>
         {data.settings && (
-          <NavigationMenuLink asChild className="shrink-0 px-0">
+          <NavigationMenuLink
+            asChild
+            className="flex-1 overflow-hidden text-ellipsis px-0 xl:flex-none"
+          >
             <Link href="/">
               <StoreLogo data={data.settings} />
             </Link>
@@ -57,7 +60,7 @@ export const Header = async ({ cart, data }: Props) => {
         <div className="flex">
           <NavigationMenuList className="h-full">
             {data.settings && (
-              <NavigationMenuItem>
+              <NavigationMenuItem className="hidden sm:block">
                 <QuickSearch>
                   <Link className="flex" href="/">
                     <StoreLogo data={data.settings} />

diff --git a/core/components/store-logo/index.tsx b/core/components/store-logo/index.tsx
@@ -28,7 +28,7 @@ export const StoreLogo = ({ data }: Props) => {
   const { logoV2: logo, storeName } = data;
 
   if (logo.__typename === 'StoreTextLogo') {
-    return <span className="text-2xl font-black">{logo.text}</span>;
+    return <span className="truncate text-2xl font-black">{logo.text}</span>;
   }
 
   return (

diff --git a/core/components/ui/navigation-menu/navigation-menu.tsx b/core/components/ui/navigation-menu/navigation-menu.tsx
@@ -51,7 +51,7 @@ const NavigationMenu = forwardRef<
           <div className="relative">
             <div
               className={cn(
-                'group flex min-h-[92px] items-center justify-between gap-6 bg-white px-6 2xl:container sm:px-10 lg:gap-8 lg:px-12 2xl:mx-auto 2xl:px-0',
+                'group flex min-h-[92px] items-center justify-between gap-1 overflow-x-hidden bg-white px-6 2xl:container sm:px-10 lg:gap-8 lg:px-12 2xl:mx-auto 2xl:px-0',
                 className,
               )}
             >