From 89f3f9cd583d1acf18243ca3afc580cd3a98d627 Mon Sep 17 00:00:00 2001
From: Hashim Khan <sardarhashim30@gmail.com>
Date: Thu, 23 Jul 2026 04:15:22 +0500
Subject: [PATCH] fix: keep footer social icons from shrinking below 16px

On narrow viewports the Kawaii toggle shared a flex row with social
icons, and the global svg max-width rule let them shrink. Prevent
shrink/wrap instead, pin icons to 16px, and keep a usable hit area.

Fixes #2456
---
 src/components/patterns/Footer/Footer.astro | 14 +++++++-------
 src/components/patterns/Footer/Footer.css   | 20 +++++++++++++++++++-
 2 files changed, 26 insertions(+), 8 deletions(-)

diff --git a/src/components/patterns/Footer/Footer.astro b/src/components/patterns/Footer/Footer.astro
index 62b8fa30c1..4cbf5b5f2a 100644
--- a/src/components/patterns/Footer/Footer.astro
+++ b/src/components/patterns/Footer/Footer.astro
@@ -109,7 +109,7 @@ import { BodyMd, Button, Col, Container, Grid } from '@/components/primitives';
                 aria-label="expressjs on GitHub"
                 target="_blank"
               >
-                <Icon name="github" />
+                <Icon name="github" size="16" />
               </a>
             </li>
             <li>
@@ -118,12 +118,12 @@ import { BodyMd, Button, Col, Container, Grid } from '@/components/primitives';
                 aria-label="expressjs channel on Youtube"
                 target="_blank"
               >
-                <Icon name="youtube" />
+                <Icon name="youtube" size="16" />
               </a>
             </li>
             <li>
               <a href="https://x.com/UseExpressJS" aria-label="follow expressjs on X account">
-                <Icon name="x" />
+                <Icon name="x" size="16" />
               </a>
             </li>
             <li>
@@ -131,7 +131,7 @@ import { BodyMd, Button, Col, Container, Grid } from '@/components/primitives';
                 href="https://slack-invite.openjsf.org"
                 aria-label="Join openjs foundation slack group"
               >
-                <Icon name="slack" />
+                <Icon name="slack" size="16" />
               </a>
             </li>
             <li>
@@ -139,7 +139,7 @@ import { BodyMd, Button, Col, Container, Grid } from '@/components/primitives';
                 href="https://opencollective.com/express"
                 aria-label="support expressjs on Open Collective"
               >
-                <Icon name="open-collective" />
+                <Icon name="open-collective" size="16" />
               </a>
             </li>
             <li>
@@ -147,12 +147,12 @@ import { BodyMd, Button, Col, Container, Grid } from '@/components/primitives';
                 href="https://bsky.app/profile/expressjs.bsky.social"
                 aria-label="follow expressjs on bluesky"
               >
-                <Icon name="bsky" />
+                <Icon name="bsky" size="16" />
               </a>
             </li>
             <li>
               <a href="/feed.xml" aria-label="RSS Feed">
-                <Icon name="rss" />
+                <Icon name="rss" size="16" />
               </a>
             </li>
           </ul>
diff --git a/src/components/patterns/Footer/Footer.css b/src/components/patterns/Footer/Footer.css
index 14804b7276..1669e9e6ad 100644
--- a/src/components/patterns/Footer/Footer.css
+++ b/src/components/patterns/Footer/Footer.css
@@ -68,16 +68,32 @@
     padding: 0;
     margin: 0;
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     justify-content: center;
     gap: var(--space-6);
 
     li {
-      display: inline;
+      display: inline-flex;
+      flex-shrink: 0;
+    }
+
+    a {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      /* Keep a usable hit area even when icons are 16px */
+      min-width: var(--size-6);
+      min-height: var(--size-6);
     }
 
     svg {
       color: var(--color-icon-primary);
+      flex-shrink: 0;
+      /* Override reset max-width:100% so flex layout cannot shrink icons */
+      width: var(--size-4);
+      height: var(--size-4);
+      max-width: none;
     }
 
     svg path {
@@ -126,6 +142,8 @@
 
   .kawaii-toggle {
     font-size: var(--font-size-sm);
+    flex-shrink: 0;
+    white-space: nowrap;
   }
 
   .kawaii-toggle[aria-pressed='true'] {