From 7e1273250733f5fa733174f0bbe086c8529a8b87 Mon Sep 17 00:00:00 2001
From: Sam Becker <sam@sambecker.com>
Date: Sun, 11 Aug 2024 16:02:47 -0400
Subject: [PATCH] Adjust site grid documentation

---
 src/app/layout.tsx          | 6 +++---
 src/components/SiteGrid.tsx | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 2ff96722..8b229bd6 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -87,9 +87,9 @@ export default function RootLayout({
               <main className={clsx(
                 'mx-3 mb-3',
                 'lg:mx-6 lg:mb-6',
-                '3xl:mx-auto',
-                // Width defined in components/SiteGrid.tsx
-                '3xl:w-[1280px]',
+                // Center on large screens
+                // 1280px width defined in components/SiteGrid.tsx
+                '3xl:mx-auto 3xl:w-[1280px]',
               )}>
                 <Nav siteDomainOrTitle={SITE_DOMAIN_OR_TITLE} />
                 <AdminBatchEditPanel />
diff --git a/src/components/SiteGrid.tsx b/src/components/SiteGrid.tsx
index 0d46552d..7b02ded7 100644
--- a/src/components/SiteGrid.tsx
+++ b/src/components/SiteGrid.tsx
@@ -2,13 +2,12 @@ import { clsx } from 'clsx/lite';
 import { RefObject } from 'react';
 
 /*
-  Max widths
+  MAX WIDTHS
   Main: 954px +
   Sidebar: 302px +
   Gap: 24px =
-  Total: 1280px (7xl)
+  Total: 1280px
   -
-  Used for main content offset (app/layout.tsx)
   Column offset: (302px + 24px) / 2 = 163px
 */
 
@@ -35,7 +34,8 @@ export default function SiteGrid({
         'grid-cols-1 md:grid-cols-12',
         'gap-x-4 lg:gap-x-6',
         'gap-y-4',
-        'max-w-7xl',
+        'max-w-[1280px]',
+        // Offset sidebar width when centering on large screens
         '3xl:translate-x-[163px]',
         className,
       )}