sebastjan/folx-tv
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Align footer width with article content for better visual consistency

Browse Source 
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
This commit is contained in:
sebastjanartic 2026-03-07 15:59:31 +00:00
parent 90150c3804
commit 8941448e8e
3 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
attached_assets/image_1772899069950.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 347 KiB

4
client/src/components/footer.tsx
View File

@ -8,10 +8,10 @@ const SOCIAL_LINKS = [
{ href: "https://www.tiktok.com/@folxtv", icon: SiTiktok, label: "TikTok", testId: "link-social-tiktok" }, { 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 ( return (
<footer className="border-t border-border mt-10" data-testid="footer"> <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 className="grid grid-cols-1 md:grid-cols-3 gap-8">
<div> <div>
<h3 className="font-bold text-card-foreground text-lg mb-3">Folx Music Television</h3> <h3 className="font-bold text-card-foreground text-lg mb-3">Folx Music Television</h3>

2
client/src/pages/article.tsx
View File

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