From f484437451eb12119fcb1a032c69d5300aa738ba Mon Sep 17 00:00:00 2001
From: Calum Muir <calumamuir@outlook.com>
Date: Sun, 21 Dec 2025 21:07:47 +0000
Subject: [PATCH] Make pages full-bleed on mobile

---
 client/src/components/SiteFooter.tsx | 13 +++++++++++--
 client/src/pages/About.tsx           |  8 ++++----
 client/src/pages/Contact.tsx         |  6 +++---
 client/src/pages/Desktop.tsx         |  2 +-
 client/src/pages/Facebook.tsx        |  4 ++--
 client/src/pages/News.tsx            |  4 ++--
 client/src/pages/NewsArticle.tsx     |  4 ++--
 client/src/pages/SupportUs.tsx       | 10 +++++-----
 8 files changed, 30 insertions(+), 21 deletions(-)

diff --git a/client/src/components/SiteFooter.tsx b/client/src/components/SiteFooter.tsx
index 9b3d868..bb18b3e 100644
--- a/client/src/components/SiteFooter.tsx
+++ b/client/src/components/SiteFooter.tsx
@@ -1,8 +1,17 @@
 import React from "react";
 
-export const SiteFooter = (): JSX.Element => {
+type SiteFooterProps = {
+    fullBleedOnMobile?: boolean;
+};
+
+export const SiteFooter = ({
+    fullBleedOnMobile = false,
+}: SiteFooterProps): JSX.Element => {
+    const outerClass = fullBleedOnMobile
+        ? "mt-0 w-full max-w-[1200px] mx-auto px-0 sm:px-8"
+        : "mt-0 w-full max-w-[1200px] mx-auto px-4 sm:px-8";
     return (
-        <footer className="mt-0 w-full max-w-[1200px] mx-auto px-4 sm:px-8">
+        <footer className={outerClass}>
             <div className="bg-[#d6d6d6] border-t border-black/20 rounded-b-[7px] px-6 sm:px-8 pb-8 pt-6 sm:pt-8">
                 <div className="[font-family:'Public_Sans',Helvetica] text-black text-sm sm:text-base tracking-[0] leading-[1.5]">
                     <p className="font-semibold">
diff --git a/client/src/pages/About.tsx b/client/src/pages/About.tsx
index 216eb72..4668350 100644
--- a/client/src/pages/About.tsx
+++ b/client/src/pages/About.tsx
@@ -77,7 +77,7 @@ export const About = (): JSX.Element => {
                     </div>
                 </section>
 
-                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0">
+                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
                     <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                         <div className="flex flex-col gap-2 sm:flex-row sm:items-end sm:justify-between">
                             <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
@@ -193,7 +193,7 @@ export const About = (): JSX.Element => {
                     </div>
                 </section>
 
-                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pt-0">
+                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pt-0">
                     <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                         <div className="h-px w-24 bg-black/20" />
                         <h2 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
@@ -306,7 +306,7 @@ export const About = (): JSX.Element => {
                     </div>
                 </section>
 
-                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0">
+                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
                     <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                         <div className="h-px w-24 bg-black/20" />
                         <h2 className="mt-4 [font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
@@ -323,7 +323,7 @@ export const About = (): JSX.Element => {
                     </div>
                 </section>
 
-                <SiteFooter />
+                <SiteFooter fullBleedOnMobile />
             </main>
         </div>
     );
diff --git a/client/src/pages/Contact.tsx b/client/src/pages/Contact.tsx
index 2a7a771..b81400c 100644
--- a/client/src/pages/Contact.tsx
+++ b/client/src/pages/Contact.tsx
@@ -55,7 +55,7 @@ export const Contact = (): JSX.Element => {
                     </div>
                 </section>
 
-                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
+                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
                     <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                         <div className="grid grid-cols-1 gap-8 sm:grid-cols-[1.1fr_0.9fr]">
                             <div>
@@ -131,7 +131,7 @@ export const Contact = (): JSX.Element => {
                         </div>
                     </div>
                 </section>
-                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
+                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
                     <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                         <div className="h-px w-full bg-black/20 mb-6" />
                         <div className="overflow-hidden rounded-[7px] border border-black/10">
@@ -145,7 +145,7 @@ export const Contact = (): JSX.Element => {
                         </div>
                     </div>
                 </section>
-                <SiteFooter />
+                <SiteFooter fullBleedOnMobile />
             </main>
         </div>
     );
diff --git a/client/src/pages/Desktop.tsx b/client/src/pages/Desktop.tsx
index 852ba9b..3769692 100644
--- a/client/src/pages/Desktop.tsx
+++ b/client/src/pages/Desktop.tsx
@@ -171,7 +171,7 @@ export const Desktop = (): JSX.Element => {
                         </div>
                     </div>
                 </section>
-                <SiteFooter />
+                <SiteFooter fullBleedOnMobile />
             </main>
         </div>
     );
diff --git a/client/src/pages/Facebook.tsx b/client/src/pages/Facebook.tsx
index bf218f5..5973c4f 100644
--- a/client/src/pages/Facebook.tsx
+++ b/client/src/pages/Facebook.tsx
@@ -60,7 +60,7 @@ export const Facebook = (): JSX.Element => {
                     </div>
                 </section>
 
-                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
+                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
                     <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                         <div className="mt-6 w-full max-w-[500px] mx-auto">
                             <iframe
@@ -83,7 +83,7 @@ export const Facebook = (): JSX.Element => {
                         </a>
                     </div>
                 </section>
-                <SiteFooter />
+                <SiteFooter fullBleedOnMobile />
             </main>
         </div>
     );
diff --git a/client/src/pages/News.tsx b/client/src/pages/News.tsx
index 263b70b..65ee00f 100644
--- a/client/src/pages/News.tsx
+++ b/client/src/pages/News.tsx
@@ -54,7 +54,7 @@ export const News = (): JSX.Element => {
                     </div>
                 </section>
 
-                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
+                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
                     <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                         <div className="grid grid-cols-1 gap-6 sm:grid-cols-3">
                             {newsArticles.map((item) => (
@@ -96,7 +96,7 @@ export const News = (): JSX.Element => {
                         </div>
                     </div>
                 </section>
-                <SiteFooter />
+                <SiteFooter fullBleedOnMobile />
             </main>
         </div>
     );
diff --git a/client/src/pages/NewsArticle.tsx b/client/src/pages/NewsArticle.tsx
index f28b008..2b1f6ad 100644
--- a/client/src/pages/NewsArticle.tsx
+++ b/client/src/pages/NewsArticle.tsx
@@ -64,7 +64,7 @@ export const NewsArticle = (): JSX.Element => {
                     </div>
                 </section>
 
-                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
+                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
                     <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                         <div
                             className="prose prose-neutral max-w-[720px] text-base sm:text-lg [font-family:'Public_Sans',Helvetica] prose-headings:font-['Merriweather',Helvetica] prose-headings:font-bold prose-p:leading-[1.75] prose-li:leading-[1.75]"
@@ -80,7 +80,7 @@ export const NewsArticle = (): JSX.Element => {
                         </div>
                     </div>
                 </section>
-                <SiteFooter />
+                <SiteFooter fullBleedOnMobile />
             </main>
         </div>
     );
diff --git a/client/src/pages/SupportUs.tsx b/client/src/pages/SupportUs.tsx
index 1f6669f..817036a 100644
--- a/client/src/pages/SupportUs.tsx
+++ b/client/src/pages/SupportUs.tsx
@@ -62,7 +62,7 @@ export const SupportUs = (): JSX.Element => {
                     </div>
                 </section>
 
-                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0">
+                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
                     <div className="bg-[#f2e2a2] px-6 sm:px-8 py-6 sm:py-8">
                         <div className="flex flex-col gap-6 sm:flex-row sm:items-center sm:justify-between">
                             <div>
@@ -93,7 +93,7 @@ export const SupportUs = (): JSX.Element => {
                     </div>
                 </section>
 
-                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0">
+                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
                     <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                         <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
                             Volunteering
@@ -189,7 +189,7 @@ export const SupportUs = (): JSX.Element => {
                     </div>
                 </section>
 
-                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0">
+                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0">
                     <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                         <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
                             Sponsor a pony
@@ -243,7 +243,7 @@ export const SupportUs = (): JSX.Element => {
                     </div>
                 </section>
 
-                <section className="w-full max-w-[1200px] mx-auto px-4 sm:px-8 mt-0 pb-0">
+                <section className="w-full max-w-[1200px] mx-auto px-0 sm:px-8 mt-0 pb-0">
                     <div className="bg-[#d6d6d6] px-6 sm:px-8 py-6 sm:py-8">
                         <h2 className="[font-family:'Merriweather',Helvetica] font-bold text-black text-2xl sm:text-3xl">
                             Fundraising
@@ -266,7 +266,7 @@ export const SupportUs = (): JSX.Element => {
                         </p>
                     </div>
                 </section>
-                <SiteFooter />
+                <SiteFooter fullBleedOnMobile />
             </main>
         </div>
     );