From 6bf2d4dcf2c267489b07c8b54999d9ef5ca5f51e Mon Sep 17 00:00:00 2001
From: Daniel Fjeldstad <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 16 Jan 2025 07:31:59 +0100
Subject: [PATCH 1/2] 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).
---
 src/components/AlgoliaSearch/MobileSearch.component.tsx | 2 +-
 src/components/Footer/Footer.component.tsx              | 2 +-
 src/components/Footer/Stickynav.component.tsx           | 2 +-
 src/components/Header/Header.component.tsx              | 2 +-
 src/components/Layout/Layout.component.tsx              | 3 +--
 src/pages/index.tsx                                     | 7 ++++---
 src/pages/kasse.tsx                                     | 8 +++-----
 src/pages/produkter.tsx                                 | 5 +++--
 8 files changed, 15 insertions(+), 16 deletions(-)

diff --git a/src/components/AlgoliaSearch/MobileSearch.component.tsx b/src/components/AlgoliaSearch/MobileSearch.component.tsx
index 77dec3cb4..9b9151bdf 100644
--- a/src/components/AlgoliaSearch/MobileSearch.component.tsx
+++ b/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}
diff --git a/src/components/Footer/Footer.component.tsx b/src/components/Footer/Footer.component.tsx
index 0acea4f35..ff3df5763 100644
--- a/src/components/Footer/Footer.component.tsx
+++ b/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
diff --git a/src/components/Footer/Stickynav.component.tsx b/src/components/Footer/Stickynav.component.tsx
index a090dcd77..096a9fef6 100644
--- a/src/components/Footer/Stickynav.component.tsx
+++ b/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
diff --git a/src/components/Header/Header.component.tsx b/src/components/Header/Header.component.tsx
index 4c54364ba..7fd9476ed 100644
--- a/src/components/Header/Header.component.tsx
+++ b/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>
   </>
diff --git a/src/components/Layout/Layout.component.tsx b/src/components/Layout/Layout.component.tsx
index b806f4447..3bc77982d 100644
--- a/src/components/Layout/Layout.component.tsx
+++ b/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>
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 93c35385d..68b356664 100644
--- a/src/pages/index.tsx
+++ b/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>
 );
 
diff --git a/src/pages/kasse.tsx b/src/pages/kasse.tsx
index 94cd74cc7..b36a40111 100644
--- a/src/pages/kasse.tsx
+++ b/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>
 );
 
diff --git a/src/pages/produkter.tsx b/src/pages/produkter.tsx
index 6bc984d1e..6136e1c27 100644
--- a/src/pages/produkter.tsx
+++ b/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>
 );
 

From 02234dd30d90e2827e65f02500f6396081e457bf Mon Sep 17 00:00:00 2001
From: Daniel Fjeldstad <45217974+w3bdesign@users.noreply.github.com>
Date: Thu, 16 Jan 2025 09:53:31 +0100
Subject: [PATCH 2/2] Update MobileSearch.component.tsx

---
 src/components/AlgoliaSearch/MobileSearch.component.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/AlgoliaSearch/MobileSearch.component.tsx b/src/components/AlgoliaSearch/MobileSearch.component.tsx
index 9b9151bdf..74b0ee8b4 100644
--- a/src/components/AlgoliaSearch/MobileSearch.component.tsx
+++ b/src/components/AlgoliaSearch/MobileSearch.component.tsx
@@ -15,7 +15,7 @@ const searchClient = algoliasearch(
 const MobileSearch = () => {
   const [search, setSearch] = useState<string | null>(null);
   const [hasFocus, sethasFocus] = useState<boolean>(false);
-  return (
+  return ( 
     <div className="inline mt-4 md:hidden px-1">
       <InstantSearch
         indexName={process.env.NEXT_PUBLIC_ALGOLIA_INDEX_NAME ?? 'changeme'}