From 479c3d93e47ace11945c58a53be872b8db6990dc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20Kr=C3=BCger?= <valknar@pivoine.art>
Date: Sun, 14 Jun 2026 21:46:33 +0200
Subject: [PATCH] fix: constrain nav and footer content to max-w-[1200px] like
 main content

Nav keeps full-width background; inner content wrapped in max-w-[1200px]
mx-auto px-7 container to align with page content width.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 app/layout.tsx     | 14 ++++++++------
 components/nav.tsx |  4 +++-
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/layout.tsx b/app/layout.tsx
index abe0fee..4458639 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -28,12 +28,14 @@ export default function RootLayout({ children }: { children: React.ReactNode })
         <AppApolloProvider>
           <Nav />
           <main className="pt-[60px] min-h-screen">{children}</main>
-          <footer className="border-t mt-8 px-7 py-6 flex flex-col sm:flex-row items-center justify-between gap-2 text-[11px] text-[#1a3a22]" style={{ borderColor: 'rgba(34,197,94,0.08)' }}>
-            <span>© {new Date().getFullYear()} World Cup Statistics. Data via openfootball.</span>
-            <a href="https://dev.pivoine.art" target="_blank" rel="noopener noreferrer"
-              className="text-[#2a5c35] hover:text-[#22c55e] transition-colors">
-              dev.pivoine.art
-            </a>
+          <footer className="border-t mt-8" style={{ borderColor: 'rgba(34,197,94,0.08)' }}>
+            <div className="max-w-[1200px] mx-auto px-7 py-6 flex flex-col sm:flex-row items-center justify-between gap-2 text-[11px] text-[#1a3a22]">
+              <span>© {new Date().getFullYear()} World Cup Statistics. Data via openfootball.</span>
+              <a href="https://dev.pivoine.art" target="_blank" rel="noopener noreferrer"
+                className="text-[#2a5c35] hover:text-[#22c55e] transition-colors">
+                dev.pivoine.art
+              </a>
+            </div>
           </footer>
         </AppApolloProvider>
       </body>
diff --git a/components/nav.tsx b/components/nav.tsx
index 89f0c78..b543686 100644
--- a/components/nav.tsx
+++ b/components/nav.tsx
@@ -40,9 +40,10 @@ export function Nav() {
   return (
     <>
       <nav
-        className="fixed top-0 left-0 right-0 z-50 h-[60px] flex items-center px-5"
+        className="fixed top-0 left-0 right-0 z-50 h-[60px]"
         style={{ background: 'rgba(4,13,8,0.97)', backdropFilter: 'blur(18px)', borderBottom: '1px solid rgba(34,197,94,0.18)' }}
       >
+      <div className="max-w-[1200px] mx-auto px-7 h-full flex items-center">
         {/* Logo */}
         <Link href="/" className="flex items-center gap-2.5 flex-shrink-0 cursor-pointer select-none">
           {/* eslint-disable-next-line @next/next/no-img-element */}
@@ -85,6 +86,7 @@ export function Nav() {
           <span className={`block w-5 h-[2px] bg-[#22c55e] rounded-full transition-all ${open ? 'opacity-0' : ''}`} />
           <span className={`block w-5 h-[2px] bg-[#22c55e] rounded-full transition-all origin-center ${open ? '-rotate-45 -translate-y-[7px]' : ''}`} />
         </button>
+      </div>
       </nav>
 
       {/* Mobile menu overlay */}