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"
>
-
+
@@ -118,12 +118,12 @@ import { BodyMd, Button, Col, Container, Grid } from '@/components/primitives';
aria-label="expressjs channel on Youtube"
target="_blank"
>
-
+
-
+
@@ -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"
>
-
+
@@ -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"
>
-
+
@@ -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"
>
-
+
-
+
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'] {