From ca4d17a4d8fdd2f3b795eb28ba65c1b56c5122b8 Mon Sep 17 00:00:00 2001
From: Jorge Moya <jorge.moya@bigcommerce.com>
Date: Tue, 7 May 2024 15:57:40 -0500
Subject: [PATCH] fix(core): header overflow in mobile widths, remove search
 when small

---
 .changeset/ten-shoes-work.md                           | 5 +++++
 core/components/header/index.tsx                       | 7 +++++--
 core/components/store-logo/index.tsx                   | 2 +-
 core/components/ui/navigation-menu/navigation-menu.tsx | 2 +-
 4 files changed, 12 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/ten-shoes-work.md

diff --git a/.changeset/ten-shoes-work.md b/.changeset/ten-shoes-work.md
new file mode 100644
index 000000000..173b49977
--- /dev/null
+++ 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
index 7ced96c8d..604d3c05e 100644
--- 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
index 505d64dc2..747911b44 100644
--- 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
index 2b87bef2e..7ac49df2a 100644
--- 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,
               )}
             >