fix: fixed the mobile view of the we accept section in the mobile view

1 files changed, 8 insertions, 8 deletions

diff --git a/frontend/src/components/footer.tsx b/frontend/src/components/footer.tsx
index d64167f..62ebf94 100644
--- a/frontend/src/components/footer.tsx
+++ b/frontend/src/components/footer.tsx
@@ -274,18 +274,18 @@ export function Footer() {
       {/* Bottom Footer */}
       <div className="border-t dark:border-neutral-800 bg-neutral-100 dark:bg-neutral-800">
         <div className="container mx-auto px-4 py-6">
-          <div className="flex flex-col lg:flex-row justify-between items-center space-y-4 lg:space-y-0 lg:gap-8">
+          <div className="flex flex-col space-y-4 lg:flex-row lg:justify-between lg:items-center lg:space-y-0 lg:gap-8">
             {/* Left: Copyright and Legal Links */}
-            <div className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-6 text-center sm:text-left">
+            <div className="flex flex-col items-center space-y-3 sm:space-y-2 text-center lg:items-start lg:text-left">
               <p className="text-sm text-muted-foreground">
                 © {new Date().getFullYear()} blcklst. All rights reserved.
               </p>
-              <div className="flex space-x-4">
+              <div className="flex flex-wrap justify-center lg:justify-start gap-x-4 gap-y-2">
                 {footerLinks.legal.map((link) => (
                   <Link
                     key={link.name}
                     href={link.href}
-                    className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+                    className="text-xs text-muted-foreground hover:text-foreground transition-colors whitespace-nowrap"
                   >
                     {link.name}
                   </Link>
@@ -294,13 +294,13 @@ export function Footer() {
             </div>
             
             {/* Right: Payment Methods */}
-            <div className="flex items-center space-x-2">
-              <span className="text-xs text-muted-foreground mr-2">We accept:</span>
-              <div className="flex space-x-1">
+            <div className="flex flex-col sm:flex-row items-center space-y-2 sm:space-y-0 sm:space-x-2">
+              <span className="text-xs text-muted-foreground text-center sm:text-left whitespace-nowrap">We accept:</span>
+              <div className="flex flex-wrap justify-center sm:justify-start gap-1 max-w-full">
                 {["Visa", "Mastercard", "AmEx", "PayPal", "Apple Pay"].map((method) => (
                   <div
                     key={method}
-                    className="bg-white dark:bg-neutral-700 border dark:border-neutral-600 rounded px-2 py-1 text-xs font-medium text-foreground"
+                    className="bg-white dark:bg-neutral-700 border dark:border-neutral-600 rounded px-1.5 py-1 text-[10px] sm:text-xs font-medium text-foreground whitespace-nowrap flex-shrink-0"
                   >
                     {method}
                   </div>