From 09250eba83ca9d73dccf83cf8cbf4f8b05004139 Mon Sep 17 00:00:00 2001
From: Michael Novotny <manovotny@gmail.com>
Date: Mon, 24 Jul 2023 13:03:51 -0500
Subject: [PATCH] Adds max width for very large screens (#1098)

---
 app/product/[handle]/page.tsx             | 14 +++++++-------
 app/search/layout.tsx                     |  6 +++---
 components/grid/three-items.tsx           |  5 ++++-
 components/layout/search/collections.tsx  |  2 +-
 components/layout/search/filter/index.tsx |  2 +-
 5 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/app/product/[handle]/page.tsx b/app/product/[handle]/page.tsx
index 9c1fc6664..f23c0cc4c 100644
--- a/app/product/[handle]/page.tsx
+++ b/app/product/[handle]/page.tsx
@@ -81,8 +81,8 @@ export default async function ProductPage({ params }: { params: { handle: string
           __html: JSON.stringify(productJsonLd)
         }}
       />
-      <div className="px-4">
-        <div className="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-700 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
+      <div className="mx-auto max-w-screen-2xl px-4">
+        <div className="rounded-lg border border-neutral-200 bg-white p-8 px-4 dark:border-neutral-800 dark:bg-black md:p-12 lg:grid lg:grid-cols-6">
           <div className="lg:col-span-4">
             <Gallery
               images={product.images.map((image: Image) => ({
@@ -96,12 +96,12 @@ export default async function ProductPage({ params }: { params: { handle: string
             <ProductDescription product={product} />
           </div>
         </div>
+        <Suspense>
+          <RelatedProducts id={product.id} />
+        </Suspense>
       </div>
       <Suspense>
-        <RelatedProducts id={product.id} />
-        <Suspense>
-          <Footer />
-        </Suspense>
+        <Footer />
       </Suspense>
     </>
   );
@@ -113,7 +113,7 @@ async function RelatedProducts({ id }: { id: string }) {
   if (!relatedProducts.length) return null;
 
   return (
-    <div className="px-4 py-8">
+    <div className="py-8">
       <div className="mb-4 text-3xl font-bold">Related Products</div>
       <div className="flex w-full gap-4 overflow-x-auto pt-1">
         {relatedProducts.map((product, i) => {
diff --git a/app/search/layout.tsx b/app/search/layout.tsx
index f7f83ec77..189ca10aa 100644
--- a/app/search/layout.tsx
+++ b/app/search/layout.tsx
@@ -7,12 +7,12 @@ import { Suspense } from 'react';
 export default function SearchLayout({ children }: { children: React.ReactNode }) {
   return (
     <Suspense>
-      <div className="mx-auto flex flex-col py-6 text-black dark:text-white md:flex-row">
-        <div className="order-first flex-none md:w-1/6">
+      <div className="mx-auto flex max-w-screen-2xl flex-col px-4 py-6 text-black dark:text-white md:flex-row">
+        <div className="order-first flex-none md:pr-12 md:pt-6">
           <Collections />
         </div>
         <div className="order-last min-h-screen w-full md:order-none">{children}</div>
-        <div className="order-none md:order-last md:w-1/6 md:flex-none">
+        <div className="order-none md:order-last md:flex-none md:pl-12 md:pt-6">
           <FilterList list={sorting} title="Sort by" />
         </div>
       </div>
diff --git a/components/grid/three-items.tsx b/components/grid/three-items.tsx
index f0a34a375..5e6ac101e 100644
--- a/components/grid/three-items.tsx
+++ b/components/grid/three-items.tsx
@@ -38,7 +38,10 @@ export async function ThreeItemGrid() {
   const [firstProduct, secondProduct, thirdProduct] = homepageItems;
 
   return (
-    <section className="p-2 lg:grid lg:grid-cols-6 lg:grid-rows-2" data-testid="homepage-products">
+    <section
+      className="mx-auto max-w-screen-2xl p-2 lg:grid lg:grid-cols-6 lg:grid-rows-2"
+      data-testid="homepage-products"
+    >
       <ThreeItemGridItem size="full" item={firstProduct} />
       <ThreeItemGridItem size="half" item={secondProduct} />
       <ThreeItemGridItem size="half" item={thirdProduct} />
diff --git a/components/layout/search/collections.tsx b/components/layout/search/collections.tsx
index 1ce848058..c45833a39 100644
--- a/components/layout/search/collections.tsx
+++ b/components/layout/search/collections.tsx
@@ -17,7 +17,7 @@ export default function Collections() {
   return (
     <Suspense
       fallback={
-        <div className="col-span-2 hidden h-[400px] w-full flex-none py-4 pl-10 lg:block">
+        <div className="col-span-2 hidden h-[400px] w-full flex-none py-4 lg:block">
           <div className={clsx(skeleton, activeAndTitles)} />
           <div className={clsx(skeleton, activeAndTitles)} />
           <div className={clsx(skeleton, items)} />
diff --git a/components/layout/search/filter/index.tsx b/components/layout/search/filter/index.tsx
index 00c496aca..054994fc6 100644
--- a/components/layout/search/filter/index.tsx
+++ b/components/layout/search/filter/index.tsx
@@ -18,7 +18,7 @@ function FilterItemList({ list }: { list: ListItem[] }) {
 export default function FilterList({ list, title }: { list: ListItem[]; title?: string }) {
   return (
     <>
-      <nav className="col-span-2 w-full flex-none px-6 py-2 md:py-4 md:pl-10">
+      <nav className="col-span-2 w-full flex-none">
         {title ? <h3 className="hidden text-xs text-neutral-500 md:block">{title}</h3> : null}
         <ul className="hidden md:block">
           <FilterItemList list={list} />