From e819f3de52adc971999f9b63131bd5d8f4ef0f7a Mon Sep 17 00:00:00 2001
From: Robert Field <robertfield@quadrimular.com>
Date: Thu, 15 Feb 2024 13:48:35 +0000
Subject: [PATCH] feat: use new pagination component for product list page
 (#199)

* feat: use new pagination component for search

* chore: changeset

* feat: use pagination component for simple output
---
 .changeset/rare-parents-return.md             |  5 ++
 .../src/components/pagination/Pagination.tsx  | 27 +++++++++-
 .../src/components/search/Pagination.tsx      | 40 ++++++++-------
 .../src/components/search/SearchResults.tsx   |  2 +-
 .../src/components/pagination/Pagination.tsx  | 27 +++++++++-
 .../src/components/search/Pagination.tsx      | 49 +++++++++----------
 .../src/components/search/SearchResults.tsx   |  2 +-
 .../src/components/pagination/Pagination.tsx  | 27 +++++++++-
 .../src/components/search/Pagination.tsx      | 49 +++++++++----------
 .../src/components/search/SearchResults.tsx   |  2 +-
 .../__tests__/__snapshots__/d2c.test.ts.snap  |  6 +++
 .../pagination/Pagination.tsx.template        | 27 +++++++++-
 .../components/search/Pagination.tsx.template | 40 ++++++++-------
 .../search/SearchResults.tsx.template         |  2 +-
 .../components/search/Pagination.tsx.template | 49 +++++++++----------
 .../search/SearchResults.tsx.template         |  2 +-
 16 files changed, 231 insertions(+), 125 deletions(-)
 create mode 100644 .changeset/rare-parents-return.md

diff --git a/.changeset/rare-parents-return.md b/.changeset/rare-parents-return.md
new file mode 100644
index 00000000..24c9063a
--- /dev/null
+++ b/.changeset/rare-parents-return.md
@@ -0,0 +1,5 @@
+---
+"@elasticpath/d2c-schematics": patch
+---
+
+use new pagination component for search
diff --git a/examples/algolia/src/components/pagination/Pagination.tsx b/examples/algolia/src/components/pagination/Pagination.tsx
index b994961a..3e6fbc8a 100644
--- a/examples/algolia/src/components/pagination/Pagination.tsx
+++ b/examples/algolia/src/components/pagination/Pagination.tsx
@@ -53,7 +53,7 @@ const PaginationLink = ({
       aria-current={isActive ? "page" : undefined}
       className={cn(
         buttonVariants({
-          variant: "link",
+          variant: isActive ? "primary" : "secondary",
           size,
         }),
         className,
@@ -64,6 +64,30 @@ const PaginationLink = ({
 );
 PaginationLink.displayName = "PaginationLink";
 
+type PaginationButtonProps = {
+  isActive?: boolean;
+} & ButtonProps;
+
+const PaginationButton = ({
+  className,
+  isActive,
+  size = "small",
+  ...props
+}: PaginationButtonProps) => (
+  <button
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "primary" : "secondary",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationButton.displayName = "PaginationButton";
+
 const PaginationPrevious = ({
   className,
   ...props
@@ -117,4 +141,5 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  PaginationButton,
 };
diff --git a/examples/algolia/src/components/search/Pagination.tsx b/examples/algolia/src/components/search/Pagination.tsx
index 142fe1ac..2fe9aefe 100644
--- a/examples/algolia/src/components/search/Pagination.tsx
+++ b/examples/algolia/src/components/search/Pagination.tsx
@@ -1,29 +1,31 @@
 import React from "react";
 import { usePagination } from "react-instantsearch";
-import clsx from "clsx";
+
+import {
+  Pagination as DisplayPagination,
+  PaginationButton,
+  PaginationContent,
+  PaginationItem,
+} from "../pagination/Pagination";
 
 export const Pagination = (): JSX.Element => {
   const { pages, currentRefinement, canRefine, refine } = usePagination();
-
   return (
-    <div className={clsx(canRefine ? "block" : "none")}>
-      <div className="flex justify-center">
-        {pages.map((page) => (
-          <button
-            className={clsx(
-              currentRefinement === page ? "bg-brand-primary" : "bg-gray-100",
-              currentRefinement === page ? "text-white" : "text-black",
-              "flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight w-fit cursor-pointer",
-            )}
-            key={page}
-            onClick={() => refine(page)}
-            disabled={!canRefine}
-          >
-            {page + 1}
-          </button>
+    <DisplayPagination>
+      <PaginationContent>
+        {pages.map((pageNumber) => (
+          <PaginationItem key={pageNumber}>
+            <PaginationButton
+              isActive={currentRefinement === pageNumber}
+              onClick={() => refine(pageNumber)}
+              disabled={!canRefine}
+            >
+              {pageNumber + 1}
+            </PaginationButton>
+          </PaginationItem>
         ))}
-      </div>
-    </div>
+      </PaginationContent>
+    </DisplayPagination>
   );
 };
 
diff --git a/examples/algolia/src/components/search/SearchResults.tsx b/examples/algolia/src/components/search/SearchResults.tsx
index 656a853b..d43e0482 100644
--- a/examples/algolia/src/components/search/SearchResults.tsx
+++ b/examples/algolia/src/components/search/SearchResults.tsx
@@ -98,7 +98,7 @@ export default function SearchResults({ lookup }: ISearchResults): JSX.Element {
         </div>
       </div>
       <hr />
-      <div className="grid grid-cols-[auto_auto_auto] gap-8">
+      <div className="grid grid-cols-[auto_1fr] gap-8">
         <div className="hidden w-[14rem] md:block lg:w-[16rem]">
           <h3 className="font-semibold">Category</h3>
           {nav && <NodeMenu nav={nav} />}
diff --git a/examples/payments/src/components/pagination/Pagination.tsx b/examples/payments/src/components/pagination/Pagination.tsx
index b994961a..3e6fbc8a 100644
--- a/examples/payments/src/components/pagination/Pagination.tsx
+++ b/examples/payments/src/components/pagination/Pagination.tsx
@@ -53,7 +53,7 @@ const PaginationLink = ({
       aria-current={isActive ? "page" : undefined}
       className={cn(
         buttonVariants({
-          variant: "link",
+          variant: isActive ? "primary" : "secondary",
           size,
         }),
         className,
@@ -64,6 +64,30 @@ const PaginationLink = ({
 );
 PaginationLink.displayName = "PaginationLink";
 
+type PaginationButtonProps = {
+  isActive?: boolean;
+} & ButtonProps;
+
+const PaginationButton = ({
+  className,
+  isActive,
+  size = "small",
+  ...props
+}: PaginationButtonProps) => (
+  <button
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "primary" : "secondary",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationButton.displayName = "PaginationButton";
+
 const PaginationPrevious = ({
   className,
   ...props
@@ -117,4 +141,5 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  PaginationButton,
 };
diff --git a/examples/payments/src/components/search/Pagination.tsx b/examples/payments/src/components/search/Pagination.tsx
index fd4ef417..35c91e96 100644
--- a/examples/payments/src/components/search/Pagination.tsx
+++ b/examples/payments/src/components/search/Pagination.tsx
@@ -1,8 +1,12 @@
 import React from "react";
 import { useProducts } from "./ProductsProvider";
-import clsx from "clsx";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
+import {
+  Pagination as DisplayPagination,
+  PaginationContent,
+  PaginationItem, PaginationLink,
+} from "../pagination/Pagination";
+
 
 function calculateTotalPages(totalItems: number, limit: number): number {
   // Ensure both totalItems and limit are positive integers
@@ -30,30 +34,23 @@ export const Pagination = (): JSX.Element => {
   const totalPages = calculateTotalPages(totalResults, page.meta.page.limit);
 
   return (
-    <div className={clsx("block")}>
-      <div className="flex justify-center gap-2 flex-wrap">
-        {[...Array(totalPages).keys()].map((currentPage) => (
-          <Link
-            href={`${pathname}?limit=${page.meta.page.limit}&offset=${
-              currentPage * page.meta.page.limit
-            }`}
-            className={clsx(
-              currentPage + 1 === page.meta.page.current
-                ? "bg-brand-primary"
-                : "bg-gray-100",
-              currentPage + 1 === page.meta.page.current
-                ? "text-white"
-                : "text-black",
-              "flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight w-fit cursor-pointer",
-            )}
-            key={currentPage + 1}
-          >
-            {currentPage + 1}
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
+      <DisplayPagination>
+        <PaginationContent>
+          {[...Array(totalPages).keys()].map((pageNumber) => (
+              <PaginationItem key={pageNumber}>
+                <PaginationLink
+                    href={`${pathname}?limit=${page.meta.page.limit}&offset=${
+                        pageNumber * page.meta.page.limit
+                    }`}
+                    isActive={pageNumber + 1 === page.meta.page.current}
+                >
+                  {pageNumber + 1}
+                </PaginationLink>
+              </PaginationItem>
+          ))}
+        </PaginationContent>
+      </DisplayPagination>
+  )
 };
 
 export default Pagination;
diff --git a/examples/payments/src/components/search/SearchResults.tsx b/examples/payments/src/components/search/SearchResults.tsx
index 357aba76..2adc7409 100644
--- a/examples/payments/src/components/search/SearchResults.tsx
+++ b/examples/payments/src/components/search/SearchResults.tsx
@@ -49,7 +49,7 @@ export default function SearchResults({
           </div>
         </div>
         <hr />
-        <div className="grid grid-cols-[auto_auto_auto] gap-8">
+        <div className="grid grid-cols-[auto_1fr] gap-8">
           <div className="hidden w-[14rem] md:block lg:w-[16rem]">
             <h3 className="font-semibold">Category</h3>
             {nav && <NodeMenu nav={nav} />}
diff --git a/examples/simple/src/components/pagination/Pagination.tsx b/examples/simple/src/components/pagination/Pagination.tsx
index b994961a..3e6fbc8a 100644
--- a/examples/simple/src/components/pagination/Pagination.tsx
+++ b/examples/simple/src/components/pagination/Pagination.tsx
@@ -53,7 +53,7 @@ const PaginationLink = ({
       aria-current={isActive ? "page" : undefined}
       className={cn(
         buttonVariants({
-          variant: "link",
+          variant: isActive ? "primary" : "secondary",
           size,
         }),
         className,
@@ -64,6 +64,30 @@ const PaginationLink = ({
 );
 PaginationLink.displayName = "PaginationLink";
 
+type PaginationButtonProps = {
+  isActive?: boolean;
+} & ButtonProps;
+
+const PaginationButton = ({
+  className,
+  isActive,
+  size = "small",
+  ...props
+}: PaginationButtonProps) => (
+  <button
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "primary" : "secondary",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationButton.displayName = "PaginationButton";
+
 const PaginationPrevious = ({
   className,
   ...props
@@ -117,4 +141,5 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  PaginationButton,
 };
diff --git a/examples/simple/src/components/search/Pagination.tsx b/examples/simple/src/components/search/Pagination.tsx
index fd4ef417..35c91e96 100644
--- a/examples/simple/src/components/search/Pagination.tsx
+++ b/examples/simple/src/components/search/Pagination.tsx
@@ -1,8 +1,12 @@
 import React from "react";
 import { useProducts } from "./ProductsProvider";
-import clsx from "clsx";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
+import {
+  Pagination as DisplayPagination,
+  PaginationContent,
+  PaginationItem, PaginationLink,
+} from "../pagination/Pagination";
+
 
 function calculateTotalPages(totalItems: number, limit: number): number {
   // Ensure both totalItems and limit are positive integers
@@ -30,30 +34,23 @@ export const Pagination = (): JSX.Element => {
   const totalPages = calculateTotalPages(totalResults, page.meta.page.limit);
 
   return (
-    <div className={clsx("block")}>
-      <div className="flex justify-center gap-2 flex-wrap">
-        {[...Array(totalPages).keys()].map((currentPage) => (
-          <Link
-            href={`${pathname}?limit=${page.meta.page.limit}&offset=${
-              currentPage * page.meta.page.limit
-            }`}
-            className={clsx(
-              currentPage + 1 === page.meta.page.current
-                ? "bg-brand-primary"
-                : "bg-gray-100",
-              currentPage + 1 === page.meta.page.current
-                ? "text-white"
-                : "text-black",
-              "flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight w-fit cursor-pointer",
-            )}
-            key={currentPage + 1}
-          >
-            {currentPage + 1}
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
+      <DisplayPagination>
+        <PaginationContent>
+          {[...Array(totalPages).keys()].map((pageNumber) => (
+              <PaginationItem key={pageNumber}>
+                <PaginationLink
+                    href={`${pathname}?limit=${page.meta.page.limit}&offset=${
+                        pageNumber * page.meta.page.limit
+                    }`}
+                    isActive={pageNumber + 1 === page.meta.page.current}
+                >
+                  {pageNumber + 1}
+                </PaginationLink>
+              </PaginationItem>
+          ))}
+        </PaginationContent>
+      </DisplayPagination>
+  )
 };
 
 export default Pagination;
diff --git a/examples/simple/src/components/search/SearchResults.tsx b/examples/simple/src/components/search/SearchResults.tsx
index 357aba76..2adc7409 100644
--- a/examples/simple/src/components/search/SearchResults.tsx
+++ b/examples/simple/src/components/search/SearchResults.tsx
@@ -49,7 +49,7 @@ export default function SearchResults({
           </div>
         </div>
         <hr />
-        <div className="grid grid-cols-[auto_auto_auto] gap-8">
+        <div className="grid grid-cols-[auto_1fr] gap-8">
           <div className="hidden w-[14rem] md:block lg:w-[16rem]">
             <h3 className="font-semibold">Category</h3>
             {nav && <NodeMenu nav={nav} />}
diff --git a/packages/d2c-schematics/__tests__/__snapshots__/d2c.test.ts.snap b/packages/d2c-schematics/__tests__/__snapshots__/d2c.test.ts.snap
index 041da7d3..527042b3 100644
--- a/packages/d2c-schematics/__tests__/__snapshots__/d2c.test.ts.snap
+++ b/packages/d2c-schematics/__tests__/__snapshots__/d2c.test.ts.snap
@@ -62,9 +62,12 @@ exports[`EP New Schematic should create cart schematic files 1`] = `
   "/bar/src/app/(store)/account/AccountNavigation.tsx",
   "/bar/src/app/(store)/account/breadcrumb.tsx",
   "/bar/src/app/(store)/account/layout.tsx",
+  "/bar/src/app/(store)/account/addresses/DeleteAddressBtn.tsx",
   "/bar/src/app/(store)/account/addresses/actions.ts",
   "/bar/src/app/(store)/account/addresses/page.tsx",
+  "/bar/src/app/(store)/account/addresses/[addressId]/UpdateForm.tsx",
   "/bar/src/app/(store)/account/addresses/[addressId]/page.tsx",
+  "/bar/src/app/(store)/account/addresses/add/AddForm.tsx",
   "/bar/src/app/(store)/account/addresses/add/page.tsx",
   "/bar/src/app/(store)/account/orders/OrderItem.tsx",
   "/bar/src/app/(store)/account/orders/OrderItemWithDetails.tsx",
@@ -284,9 +287,12 @@ exports[`EP New Schematic should create files of a workspace 1`] = `
   "/bar/src/app/(store)/account/AccountNavigation.tsx",
   "/bar/src/app/(store)/account/breadcrumb.tsx",
   "/bar/src/app/(store)/account/layout.tsx",
+  "/bar/src/app/(store)/account/addresses/DeleteAddressBtn.tsx",
   "/bar/src/app/(store)/account/addresses/actions.ts",
   "/bar/src/app/(store)/account/addresses/page.tsx",
+  "/bar/src/app/(store)/account/addresses/[addressId]/UpdateForm.tsx",
   "/bar/src/app/(store)/account/addresses/[addressId]/page.tsx",
+  "/bar/src/app/(store)/account/addresses/add/AddForm.tsx",
   "/bar/src/app/(store)/account/addresses/add/page.tsx",
   "/bar/src/app/(store)/account/orders/OrderItem.tsx",
   "/bar/src/app/(store)/account/orders/OrderItemWithDetails.tsx",
diff --git a/packages/d2c-schematics/application/files/src/components/pagination/Pagination.tsx.template b/packages/d2c-schematics/application/files/src/components/pagination/Pagination.tsx.template
index b994961a..3e6fbc8a 100644
--- a/packages/d2c-schematics/application/files/src/components/pagination/Pagination.tsx.template
+++ b/packages/d2c-schematics/application/files/src/components/pagination/Pagination.tsx.template
@@ -53,7 +53,7 @@ const PaginationLink = ({
       aria-current={isActive ? "page" : undefined}
       className={cn(
         buttonVariants({
-          variant: "link",
+          variant: isActive ? "primary" : "secondary",
           size,
         }),
         className,
@@ -64,6 +64,30 @@ const PaginationLink = ({
 );
 PaginationLink.displayName = "PaginationLink";
 
+type PaginationButtonProps = {
+  isActive?: boolean;
+} & ButtonProps;
+
+const PaginationButton = ({
+  className,
+  isActive,
+  size = "small",
+  ...props
+}: PaginationButtonProps) => (
+  <button
+    aria-current={isActive ? "page" : undefined}
+    className={cn(
+      buttonVariants({
+        variant: isActive ? "primary" : "secondary",
+        size,
+      }),
+      className,
+    )}
+    {...props}
+  />
+);
+PaginationButton.displayName = "PaginationButton";
+
 const PaginationPrevious = ({
   className,
   ...props
@@ -117,4 +141,5 @@ export {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
+  PaginationButton,
 };
diff --git a/packages/d2c-schematics/product-list-page-algolia/files/src/components/search/Pagination.tsx.template b/packages/d2c-schematics/product-list-page-algolia/files/src/components/search/Pagination.tsx.template
index 142fe1ac..2fe9aefe 100644
--- a/packages/d2c-schematics/product-list-page-algolia/files/src/components/search/Pagination.tsx.template
+++ b/packages/d2c-schematics/product-list-page-algolia/files/src/components/search/Pagination.tsx.template
@@ -1,29 +1,31 @@
 import React from "react";
 import { usePagination } from "react-instantsearch";
-import clsx from "clsx";
+
+import {
+  Pagination as DisplayPagination,
+  PaginationButton,
+  PaginationContent,
+  PaginationItem,
+} from "../pagination/Pagination";
 
 export const Pagination = (): JSX.Element => {
   const { pages, currentRefinement, canRefine, refine } = usePagination();
-
   return (
-    <div className={clsx(canRefine ? "block" : "none")}>
-      <div className="flex justify-center">
-        {pages.map((page) => (
-          <button
-            className={clsx(
-              currentRefinement === page ? "bg-brand-primary" : "bg-gray-100",
-              currentRefinement === page ? "text-white" : "text-black",
-              "flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight w-fit cursor-pointer",
-            )}
-            key={page}
-            onClick={() => refine(page)}
-            disabled={!canRefine}
-          >
-            {page + 1}
-          </button>
+    <DisplayPagination>
+      <PaginationContent>
+        {pages.map((pageNumber) => (
+          <PaginationItem key={pageNumber}>
+            <PaginationButton
+              isActive={currentRefinement === pageNumber}
+              onClick={() => refine(pageNumber)}
+              disabled={!canRefine}
+            >
+              {pageNumber + 1}
+            </PaginationButton>
+          </PaginationItem>
         ))}
-      </div>
-    </div>
+      </PaginationContent>
+    </DisplayPagination>
   );
 };
 
diff --git a/packages/d2c-schematics/product-list-page-algolia/files/src/components/search/SearchResults.tsx.template b/packages/d2c-schematics/product-list-page-algolia/files/src/components/search/SearchResults.tsx.template
index 656a853b..d43e0482 100644
--- a/packages/d2c-schematics/product-list-page-algolia/files/src/components/search/SearchResults.tsx.template
+++ b/packages/d2c-schematics/product-list-page-algolia/files/src/components/search/SearchResults.tsx.template
@@ -98,7 +98,7 @@ export default function SearchResults({ lookup }: ISearchResults): JSX.Element {
         </div>
       </div>
       <hr />
-      <div className="grid grid-cols-[auto_auto_auto] gap-8">
+      <div className="grid grid-cols-[auto_1fr] gap-8">
         <div className="hidden w-[14rem] md:block lg:w-[16rem]">
           <h3 className="font-semibold">Category</h3>
           {nav && <NodeMenu nav={nav} />}
diff --git a/packages/d2c-schematics/product-list-page-simple/files/src/components/search/Pagination.tsx.template b/packages/d2c-schematics/product-list-page-simple/files/src/components/search/Pagination.tsx.template
index fd4ef417..35c91e96 100644
--- a/packages/d2c-schematics/product-list-page-simple/files/src/components/search/Pagination.tsx.template
+++ b/packages/d2c-schematics/product-list-page-simple/files/src/components/search/Pagination.tsx.template
@@ -1,8 +1,12 @@
 import React from "react";
 import { useProducts } from "./ProductsProvider";
-import clsx from "clsx";
-import Link from "next/link";
 import { usePathname } from "next/navigation";
+import {
+  Pagination as DisplayPagination,
+  PaginationContent,
+  PaginationItem, PaginationLink,
+} from "../pagination/Pagination";
+
 
 function calculateTotalPages(totalItems: number, limit: number): number {
   // Ensure both totalItems and limit are positive integers
@@ -30,30 +34,23 @@ export const Pagination = (): JSX.Element => {
   const totalPages = calculateTotalPages(totalResults, page.meta.page.limit);
 
   return (
-    <div className={clsx("block")}>
-      <div className="flex justify-center gap-2 flex-wrap">
-        {[...Array(totalPages).keys()].map((currentPage) => (
-          <Link
-            href={`${pathname}?limit=${page.meta.page.limit}&offset=${
-              currentPage * page.meta.page.limit
-            }`}
-            className={clsx(
-              currentPage + 1 === page.meta.page.current
-                ? "bg-brand-primary"
-                : "bg-gray-100",
-              currentPage + 1 === page.meta.page.current
-                ? "text-white"
-                : "text-black",
-              "flex w-full items-center justify-center rounded-md bg-brand-primary px-4 py-2 font-semibold text-white transition-all duration-200 hover:bg-brand-highlight w-fit cursor-pointer",
-            )}
-            key={currentPage + 1}
-          >
-            {currentPage + 1}
-          </Link>
-        ))}
-      </div>
-    </div>
-  );
+      <DisplayPagination>
+        <PaginationContent>
+          {[...Array(totalPages).keys()].map((pageNumber) => (
+              <PaginationItem key={pageNumber}>
+                <PaginationLink
+                    href={`${pathname}?limit=${page.meta.page.limit}&offset=${
+                        pageNumber * page.meta.page.limit
+                    }`}
+                    isActive={pageNumber + 1 === page.meta.page.current}
+                >
+                  {pageNumber + 1}
+                </PaginationLink>
+              </PaginationItem>
+          ))}
+        </PaginationContent>
+      </DisplayPagination>
+  )
 };
 
 export default Pagination;
diff --git a/packages/d2c-schematics/product-list-page-simple/files/src/components/search/SearchResults.tsx.template b/packages/d2c-schematics/product-list-page-simple/files/src/components/search/SearchResults.tsx.template
index 357aba76..2adc7409 100644
--- a/packages/d2c-schematics/product-list-page-simple/files/src/components/search/SearchResults.tsx.template
+++ b/packages/d2c-schematics/product-list-page-simple/files/src/components/search/SearchResults.tsx.template
@@ -49,7 +49,7 @@ export default function SearchResults({
           </div>
         </div>
         <hr />
-        <div className="grid grid-cols-[auto_auto_auto] gap-8">
+        <div className="grid grid-cols-[auto_1fr] gap-8">
           <div className="hidden w-[14rem] md:block lg:w-[16rem]">
             <h3 className="font-semibold">Category</h3>
             {nav && <NodeMenu nav={nav} />}