Add global 4px padding for mobile

Fixes #1393

Add global 4px padding for mobile to various components and pages.

* **Header Component**
  - Add `px-1` class to the outermost `div` in `src/components/Header/Header.component.tsx`.

* **Footer Component**
  - Add `px-1` class to the outermost `div` in `src/components/Footer/Footer.component.tsx`.

* **Layout Component**
  - Add `px-1` class to the outermost `div` in `src/components/Layout/Layout.component.tsx`.

* **Mobile Search Component**
  - Add `px-1` class to the outermost `div` in `src/components/AlgoliaSearch/MobileSearch.component.tsx`.

* **Sticky Navigation Component**
  - Add `px-1` class to the outermost `nav` in `src/components/Footer/Stickynav.component.tsx`.

* **Index Page**
  - Add `px-1` class to the outermost `div` in `src/pages/index.tsx`.

* **Checkout Page**
  - Add `px-1` class to the outermost `div` in `src/pages/kasse.tsx`.

* **Products Page**
  - Add `px-1` class to the outermost `div` in `src/pages/produkter.tsx`.

---

For more details, open the [Copilot Workspace session](https://copilot-workspace.githubnext.com/w3bdesign/nextjs-woocommerce/issues/1393?shareId=XXXX-XXXX-XXXX-XXXX).

Author: w3bdesign

src/components/AlgoliaSearch/MobileSearch.component.tsx

@@ -16,7 +16,7 @@ const MobileSearch = () => {
   const [search, setSearch] = useState<string | null>(null);
   const [hasFocus, sethasFocus] = useState<boolean>(false);
   return (
-    <div className="inline mt-4 md:hidden">
+    <div className="inline mt-4 md:hidden px-1">
       <InstantSearch
         indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME ?? 'changeme'}
         searchClient={searchClient}

src/components/Footer/Footer.component.tsx

@@ -5,7 +5,7 @@
  */
 const Footer = () => (
   <footer className="w-full bg-white border-t border-gray-200 mt-12">
-    <div className="container mx-auto px-6">
+    <div className="container mx-auto px-6 px-1">
       <div className="py-4">
         <div className="text-gray-600 text-center">
           &copy; {new Date().getFullYear()} Daniel / w3bdesign

src/components/Footer/Stickynav.component.tsx

@@ -11,7 +11,7 @@ import Hamburger from './Hamburger.component';
  * Includes mobile menu.
  */
 const Stickynav = () => (
-  <nav id="footer" className="fixed bottom-0 z-50 w-full mt-[10rem] md:hidden">
+  <nav id="footer" className="fixed bottom-0 z-50 w-full mt-[10rem] md:hidden px-1">
     <div className="container flex flex-wrap items-center justify-between px-6 py-3 mx-auto mt-0 md:min-w-96 bg-blue-800">
       <Hamburger />
       <div

src/components/Header/Header.component.tsx

@@ -25,7 +25,7 @@ const Header = ({ title }: IHeaderProps) => (
         key="pagetitle"
       />
     </Head>
-    <div className="container mx-auto px-6">
+    <div className="container mx-auto px-6 px-1">
       <Navbar />
     </div>
   </>

src/components/Layout/Layout.component.tsx

@@ -1,4 +1,3 @@
-// Imports
 import { ReactNode, useContext, useEffect } from 'react';
 import { useQuery } from '@apollo/client';
 
@@ -56,7 +55,7 @@ const Layout = ({ children, title }: ILayoutProps) => {
   }, [refetch]);
 
   return (
-    <div className="flex flex-col min-h-screen w-full mx-auto">
+    <div className="flex flex-col min-h-screen w-full mx-auto px-1">
       <Header title={title} />
       {title === 'Hjem' ? (
         <main className="flex-1">{children}</main>

src/pages/index.tsx

@@ -1,4 +1,3 @@
-// Components
 import Hero from '@/components/Index/Hero.component';
 import DisplayProducts from '@/components/Product/DisplayProducts.component';
 import Layout from '@/components/Layout/Layout.component';
@@ -23,8 +22,10 @@ const Index: NextPage = ({
   products,
 }: InferGetStaticPropsType<typeof getStaticProps>) => (
   <Layout title="Hjem">
-    <Hero />
-    {products && <DisplayProducts products={products} />}
+    <div className="px-1">
+      <Hero />
+      {products && <DisplayProducts products={products} />}
+    </div>
   </Layout>
 );
 

src/pages/kasse.tsx

@@ -1,13 +1,11 @@
-// Components
 import Layout from '@/components/Layout/Layout.component';
 import CheckoutForm from '@/components/Checkout/CheckoutForm.component';
 
-// Types
-import type { NextPage } from 'next';
-
 const Kasse: NextPage = () => (
   <Layout title="Kasse">
-    <CheckoutForm />
+    <div className="px-1">
+      <CheckoutForm />
+    </div>
   </Layout>
 );
 

src/pages/produkter.tsx

@@ -1,4 +1,3 @@
-// Components
 import DisplayProducts from '@/components/Product/DisplayProducts.component';
 import Layout from '@/components/Layout/Layout.component';
 
@@ -22,7 +21,9 @@ const Produkter: NextPage = ({
   products,
 }: InferGetStaticPropsType<typeof getStaticProps>) => (
   <Layout title="Produkter">
-    {products && <DisplayProducts products={products} />}
+    <div className="px-1">
+      {products && <DisplayProducts products={products} />}
+    </div>
   </Layout>
 );