From ae6e2b020ca320da396239eb879147d55b64cc5f Mon Sep 17 00:00:00 2001
From: JohannesOmsDev <johannesm@oms.africa>
Date: Tue, 27 May 2025 16:43:21 +0200
Subject: [PATCH] refactor newsletter subscription form layout for better
 responsiveness

---
 components/Footer.tsx | 49 +++++++++++++++++++++----------------------
 1 file changed, 24 insertions(+), 25 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index cd5006d..b127261 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -157,40 +157,39 @@ const Footer = () => {
             </p>
             <form className="flex flex-col sm:flex-row gap-2">
               {/* Input needs dark background styles */}
-              <div className="relative">
+              <div className="relative max-w-md mx-auto w-full">
                 <input
                   type="email"
                   placeholder="Enter your email"
                   aria-label="Email for newsletter"
                   className="
-          w-full
-          pr-24           
-          
-          px-4 py-2
-          rounded-lg
-          bg-[var(--dark-input)]
-          border border-[var(--dark-border)]
-          text-[var(--dark-foreground)]
-          placeholder:text-[var(--dark-muted-foreground)]
-          focus:outline-none focus:ring-2 focus:ring-ring
-          focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
-        "
+      w-full
+      pr-24
+      px-4 py-2
+      rounded-lg
+      bg-[var(--dark-input)]
+      border border-[var(--dark-border)]
+      text-[var(--dark-foreground)]
+      placeholder:text-[var(--dark-muted-foreground)]
+      focus:outline-none focus:ring-2 focus:ring-ring
+      focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
+    "
                 />
                 <button
                   type="submit"
                   className="
-          absolute top-0 right-0
-          h-full
-          px-4
-          rounded-r-lg  
-          bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] 
-          text-primary-foreground
-          font-semibold
-          hover:bg-opacity-90
-          transition-colors
-          focus:outline-none focus:ring-2 focus:ring-ring
-          focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
-        "
+      absolute top-0 right-0
+      h-full
+      px-4
+      rounded-r-lg  
+      bg-[linear-gradient(to_right,#e6cd4b,#fff8b3,#e0b843)] 
+      text-primary-foreground
+      font-semibold
+      hover:bg-opacity-90
+      transition-colors
+      focus:outline-none focus:ring-2 focus:ring-ring
+      focus:ring-offset-2 focus:ring-offset-[var(--oms-black)]
+    "
                 >
                   Subscribe
                 </button>