Align footer width with article content for better visual consistency

Modify the Footer component to accept a `narrow` prop, and apply it on article pages to constrain the footer's max-width to match the article content area.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 23852c00-4779-460a-9e0c-d09fee4b6c92
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Event-Id: d3e5a724-3096-4ab6-a1fa-da666b50e4c7
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/f209e72a-0939-48fa-84fc-57854de71967/23852c00-4779-460a-9e0c-d09fee4b6c92/aNXfGlM
Replit-Helium-Checkpoint-Created: true

client/src/components/footer.tsx

@@ -8,10 +8,10 @@ const SOCIAL_LINKS = [
   { href: "https://www.tiktok.com/@folxtv", icon: SiTiktok, label: "TikTok", testId: "link-social-tiktok" },
 ];
 
-export default function Footer() {
+export default function Footer({ narrow }: { narrow?: boolean }) {
   return (
     <footer className="border-t border-border mt-10" data-testid="footer">
-      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-20">
+      <div className={`${narrow ? "max-w-4xl" : "max-w-7xl"} mx-auto px-4 sm:px-6 lg:px-8 py-8 relative z-20`}>
         <div className="grid grid-cols-1 md:grid-cols-3 gap-8">
           <div>
             <h3 className="font-bold text-card-foreground text-lg mb-3">Folx Music Television</h3>

client/src/pages/article.tsx

@@ -337,7 +337,7 @@ export default function ArticlePage() {
 
         <RelatedArticles currentSlug={slug || ""} />
       </main>
-      <Footer />
+      <Footer narrow />
     </div>
   );
 }