From 50ffb2be00407cbc9c198e5feb96e3f372e3b14e Mon Sep 17 00:00:00 2001
From: Marcel Gerber <mgerber59@gmail.com>
Date: Tue, 21 Jan 2025 17:08:54 +0100
Subject: [PATCH] enhance(homepage): dynamically fill space with 1 or 2 socials
 column

---
 site/gdocs/pages/Homepage.scss | 7 +++++++
 site/gdocs/pages/Homepage.tsx  | 2 +-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/site/gdocs/pages/Homepage.scss b/site/gdocs/pages/Homepage.scss
index 1016f03777..eb0e7530ed 100644
--- a/site/gdocs/pages/Homepage.scss
+++ b/site/gdocs/pages/Homepage.scss
@@ -96,6 +96,13 @@
 }
 
 .homepage-social-ribbon__social-list {
+    grid-template-columns: 1fr; // fallback for browsers that don't support `max()` below.
+
+    // A bunch of magic numbers!
+    // The 40% ensures that auto-fit creates at most 2 columns. We can't use the more sensible 50%, because grid gaps need to be accounted for.
+    // The 120px ensures that a column is at least 120px wide, i.e. we only get 2 columns if the container is at least 240px (+gap) wide.
+    grid-template-columns: repeat(auto-fit, minmax(max(40%, 120px), 1fr));
+
     margin-top: 16px;
     li {
         list-style: none;
diff --git a/site/gdocs/pages/Homepage.tsx b/site/gdocs/pages/Homepage.tsx
index daf406dd9a..adcfccadbf 100644
--- a/site/gdocs/pages/Homepage.tsx
+++ b/site/gdocs/pages/Homepage.tsx
@@ -36,7 +36,7 @@ const SocialSection = () => {
             </section>
             <section className="homepage-social-ribbon__social-media span-cols-4 span-sm-cols-12 col-sm-start-2">
                 <h2 className="h2-semibold">Follow us</h2>
-                <ul className="homepage-social-ribbon__social-list grid grid-cols-2 grid-md-cols-1">
+                <ul className="homepage-social-ribbon__social-list grid">
                     {[...SOCIALS, ...RSS_FEEDS].map(({ title, url, icon }) => (
                         <li key={title}>
                             <a