From c2245873745d6924bee9e3d5082ef204c191461a Mon Sep 17 00:00:00 2001
From: Mathijs Rutgers <mathijsrutgers@gmail.com>
Date: Sun, 29 Mar 2026 15:51:32 +0200
Subject: [PATCH] Turn ContributionCard into a container to allow more fluid
 sizing

---
 src/components/ContributionCard.css | 31 +++++++++++++++++++++++++++++
 src/components/ContributionCard.tsx | 13 +++++++-----
 2 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/components/ContributionCard.css b/src/components/ContributionCard.css
index cf1a5eb..5721a3c 100644
--- a/src/components/ContributionCard.css
+++ b/src/components/ContributionCard.css
@@ -47,3 +47,34 @@
     0 0 15px 2px rgba(249, 115, 22, 0.15),
     0 0 30px 5px rgba(239, 68, 68, 0.08);
 }
+
+.contribution-card {
+  container-type: inline-size;
+}
+
+/* Hidden by default, shown only at medium widths */
+.card-header-contributions-short {
+  display: none;
+}
+
+@container (max-width: 319px) {
+  .card-header-content {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 0.125rem;
+  }
+
+  .card-header-stats {
+    margin-left: 0;
+  }
+}
+
+@container (min-width: 320px) and (max-width: 399px) {
+  .card-header-contributions-label {
+    display: none;
+  }
+
+  .card-header-contributions-short {
+    display: inline;
+  }
+}
diff --git a/src/components/ContributionCard.tsx b/src/components/ContributionCard.tsx
index e308747..548f488 100644
--- a/src/components/ContributionCard.tsx
+++ b/src/components/ContributionCard.tsx
@@ -42,7 +42,7 @@ export default function ContributionCard({
     }
   }
 
-  const sharedClass = `bg-gh-card rounded-xl px-5 py-4 transition-colors duration-150 w-full text-left ${
+  const sharedClass = `contribution-card bg-gh-card rounded-xl px-5 py-4 transition-colors duration-150 w-full text-left ${
     hasStreak ? "streak-glow border border-transparent" : "border border-gh-border"
   }`;
 
@@ -57,7 +57,7 @@ export default function ContributionCard({
       onClick={isClickable ? handleSelect : undefined}
     >
       {/* Header */}
-      <div className="flex items-center gap-2.5 mb-3">
+      <div className="card-header flex items-center gap-2.5 mb-3">
         <div className="relative w-8 h-8 shrink-0">
           {(!result.data || !avatarLoaded) && (
             <div className="absolute inset-0 rounded-full bg-gh-badge animate-pulse" />
@@ -71,7 +71,7 @@ export default function ContributionCard({
             />
           )}
         </div>
-        <div className="flex items-center justify-between w-full">
+        <div className="card-header-content flex items-center justify-between w-full">
           <span className="font-semibold text-[15px]">
             {username}
             {hasStreak && (
@@ -85,9 +85,12 @@ export default function ContributionCard({
             )}
           </span>
           {totalContributions != null ? (
-            <div className="flex items-center gap-2 ml-2">
+            <div className="card-header-stats flex items-center gap-2 ml-2">
               <span className="text-gh-text-secondary text-xs font-bold">
-                {totalContributions} contributions
+                <span className="card-header-contributions-label">
+                  {totalContributions} contributions
+                </span>
+                <span className="card-header-contributions-short">{totalContributions}</span>
               </span>
               {velocity && velocity.percentage !== 0 && (
                 <VelocityBadge velocity={velocity} periodDays={result.periodDays} />