fix(core): set mobile padding to 16px

.changeset/tame-walls-itch.md

@@ -0,0 +1,5 @@
+---
+"@bigcommerce/catalyst-core": patch
+---
+
+Set mobile padding to 16px instead of 24px

core/app/[locale]/(default)/compare/page.tsx

@@ -137,7 +137,7 @@ export default async function Compare({
         {t('comparingQuantity', { quantity: products.length })}
       </h1>
 
-      <div className="-mx-6 overflow-auto overscroll-x-contain px-6 sm:-mx-10 sm:px-10 lg:-mx-12 lg:px-12">
+      <div className="-mx-6 overflow-auto overscroll-x-contain px-4 sm:-mx-10 sm:px-10 lg:-mx-12 lg:px-12">
         <table className="mx-auto w-full max-w-full table-fixed text-base md:w-fit">
           <caption className="sr-only">{t('productComparison')}</caption>
 

core/app/[locale]/(default)/layout.tsx

@@ -44,7 +44,7 @@ export default async function DefaultLayout({ children, params: { locale } }: Pr
     <>
       <Header cart={<Cart />} data={data.site} />
 
-      <main className="flex-1 px-6 2xl:container sm:px-10 lg:px-12 2xl:mx-auto 2xl:px-0">
+      <main className="flex-1 px-4 2xl:container sm:px-10 lg:px-12 2xl:mx-auto 2xl:px-0">
         {children}
       </main>
 

core/app/[locale]/maintenance/page.tsx

@@ -6,7 +6,7 @@ import { graphql } from '~/client/graphql';
 import { StoreLogo, StoreLogoFragment } from '~/components/store-logo';
 
 const Container = ({ children }: { children: ReactNode }) => (
-  <main className="mx-auto mt-[64px] px-6 md:px-10 lg:mt-[128px]">{children}</main>
+  <main className="mx-auto mt-[64px] px-4 md:px-10 lg:mt-[128px]">{children}</main>
 );
 
 export const metadata = {

core/app/[locale]/not-found.tsx

@@ -58,7 +58,7 @@ export default async function NotFound() {
         data={data.site}
       />
 
-      <main className="mx-auto mb-10 max-w-[835px] space-y-8 px-6 sm:px-10 lg:px-0">
+      <main className="mx-auto mb-10 max-w-[835px] space-y-8 px-4 sm:px-10 lg:px-0">
         <div className="flex flex-col gap-8 px-0 py-16">
           <h2 className="text-4xl font-black lg:text-5xl">{t('heading')}</h2>
           <p className="text-lg">{t('message')}</p>

core/app/notifications.tsx

@@ -3,7 +3,7 @@ import { Toaster } from 'react-hot-toast';
 export const Notifications = () => {
   return (
     <Toaster
-      containerClassName="px-6 2xl:container sm:px-10 lg:px-12 2xl:mx-auto 2xl:px-0"
+      containerClassName="px-4 2xl:container sm:px-10 lg:px-12 2xl:mx-auto 2xl:px-0"
       position="top-right"
       toastOptions={{
         className:

core/components/quick-search/index.tsx

@@ -93,7 +93,7 @@ export const QuickSearch = ({ children, initialTerm = '' }: SearchProps) => {
       <SheetOverlay className="bg-transparent backdrop-blur-none">
         <SheetContent
           className={cn(
-            'flex min-h-[92px] flex-col px-6 py-4 data-[state=closed]:duration-0 data-[state=open]:duration-0 md:px-10 md:py-4 lg:px-12',
+            'flex min-h-[92px] flex-col px-4 py-4 data-[state=closed]:duration-0 data-[state=open]:duration-0 md:px-10 md:py-4 lg:px-12',
             searchResults && searchResults.products.length > 0 && 'h-full lg:h-3/4',
           )}
           side="top"

core/components/ui/carousel/carousel.tsx

@@ -158,7 +158,7 @@ const CarouselContent = forwardRef<ElementRef<'div'>, ComponentPropsWithRef<'div
 
     return (
       <div className="-mx-2 overflow-hidden px-2" ref={carouselRef}>
-        <div className={cn('-mx-6 mb-16 mt-8 flex lg:mt-10', className)} ref={ref} {...props}>
+        <div className={cn('-mx-4 mb-16 mt-8 flex lg:mt-10', className)} ref={ref} {...props}>
           {children}
         </div>
       </div>
@@ -178,7 +178,7 @@ const CarouselItem = forwardRef<
     <div
       aria-roledescription="slide"
       className={cn(
-        'grid min-w-0 shrink-0 grow-0 basis-full grid-cols-2 gap-6 px-6 md:grid-cols-4 lg:gap-8',
+        'grid min-w-0 shrink-0 grow-0 basis-full grid-cols-2 gap-6 px-4 md:grid-cols-4 lg:gap-8',
         !slidesInView.includes(index) && 'invisible',
         className,
       )}

core/components/ui/footer/footer.tsx

@@ -15,7 +15,7 @@ Footer.displayName = 'Footer';
 const FooterSection = forwardRef<ElementRef<'section'>, ComponentPropsWithRef<'div'>>(
   ({ children, className, ...props }, ref) => (
     <section
-      className={cn('border-t border-gray-200 px-6 py-8 sm:px-10 lg:px-12 2xl:px-0', className)}
+      className={cn('border-t border-gray-200 px-4 py-8 sm:px-10 lg:px-12 2xl:px-0', className)}
       {...props}
       ref={ref}
     >

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-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',
+                'group flex min-h-[92px] items-center justify-between gap-1 overflow-x-hidden bg-white px-4 2xl:container sm:px-10 lg:gap-8 lg:px-12 2xl:mx-auto 2xl:px-0',
                 className,
               )}
             >
@@ -218,7 +218,7 @@ const NavigationMenuCollapsed = forwardRef<ElementRef<'div'>, ComponentPropsWith
     return (
       <div
         className={cn(
-          'in-collapsed-nav group absolute start-0 top-full z-50 w-full bg-white px-6 pb-6 duration-200 animate-in slide-in-from-top-5 2xl:container sm:px-10 lg:px-12 2xl:mx-auto 2xl:px-0',
+          'in-collapsed-nav group absolute start-0 top-full z-50 w-full bg-white px-4 pb-6 duration-200 animate-in slide-in-from-top-5 2xl:container sm:px-10 lg:px-12 2xl:mx-auto 2xl:px-0',
           className,
           !isExpanded && 'hidden',
         )}