From 12bd36bd9703090705df76bf330a9ad89852dc9c Mon Sep 17 00:00:00 2001
From: fullsizemalt <106900403+fullsizemalt@users.noreply.github.com>
Date: Sat, 20 Dec 2025 21:24:54 -0800
Subject: [PATCH] fix: Add mx-auto max-w-7xl to containers for proper centering
 on wide screens

---
 frontend/app/layout.tsx               | 2 +-
 frontend/components/layout/footer.tsx | 2 +-
 frontend/components/layout/navbar.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx
index 9d27afe..d3b105d 100644
--- a/frontend/app/layout.tsx
+++ b/frontend/app/layout.tsx
@@ -26,7 +26,7 @@ export default function RootLayout({
         <AuthProvider>
           <PreferencesProvider>
             <Navbar />
-            <main className="container py-6 flex-1">
+            <main className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 py-6 flex-1">
               {children}
             </main>
             <Footer />
diff --git a/frontend/components/layout/footer.tsx b/frontend/components/layout/footer.tsx
index 695d8ce..cb569e7 100644
--- a/frontend/components/layout/footer.tsx
+++ b/frontend/components/layout/footer.tsx
@@ -3,7 +3,7 @@ import Link from "next/link"
 export function Footer() {
     return (
         <footer className="border-t py-6 md:py-8 mt-12 bg-muted/30">
-            <div className="container flex flex-col md:flex-row items-center justify-between gap-4">
+            <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex flex-col md:flex-row items-center justify-between gap-4">
                 <div className="flex flex-col gap-1 items-center md:items-start text-center md:text-left">
                     <span className="font-bold">Elmeg</span>
                     <span className="text-sm text-muted-foreground">The community archive.</span>
diff --git a/frontend/components/layout/navbar.tsx b/frontend/components/layout/navbar.tsx
index de70361..2290810 100644
--- a/frontend/components/layout/navbar.tsx
+++ b/frontend/components/layout/navbar.tsx
@@ -17,7 +17,7 @@ export function Navbar() {
     const { user, logout } = useAuth()
     return (
         <header className="sticky top-0 z-50 w-full border-b bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60">
-            <div className="container flex h-14 items-center">
+            <div className="container mx-auto max-w-7xl px-4 sm:px-6 lg:px-8 flex h-14 items-center">
                 <div className="mr-4 hidden md:flex">
                     <Link href="/" className="mr-6 flex items-center space-x-2">
                         <Music className="h-6 w-6" />