From e4380a22c453a273143d177b0644cef8778a2233 Mon Sep 17 00:00:00 2001
From: Ayush Jhawar <ayushjhawar499@gmail.com>
Date: Wed, 12 Feb 2025 21:46:39 +0530
Subject: [PATCH 1/6] fix: special honor full timers

---
 .../src/components/ContributorOverview.tsx    | 165 ++++++++++++------
 1 file changed, 111 insertions(+), 54 deletions(-)

diff --git a/frontend/src/components/ContributorOverview.tsx b/frontend/src/components/ContributorOverview.tsx
index a6b2c0c..3553f5d 100644
--- a/frontend/src/components/ContributorOverview.tsx
+++ b/frontend/src/components/ContributorOverview.tsx
@@ -9,15 +9,30 @@ import { ContributorCard } from "./ContributorCard"
 import { getAvatarUrl, getProfileUrl } from "../constants/github"
 import { CONTRIBUTION_TYPES, STATS_CONFIG } from "../constants/metrics"
 
+const FULL_TIMERS = ["seveibar", "imrishabh18"]
+
 export function ContributorOverview({
   contributors,
   onSelectContributor,
 }: ContributorOverviewProps) {
   const [showAllContributors, setShowAllContributors] = useState(false)
 
-  // Get top 3 contributors for podium
-  const podiumContributors = contributors.slice(0, 3)
-  const remainingContributors = contributors.slice(3)
+  // First, separate full-timers from other contributors
+  const [fullTimerContributors, otherContributors] = contributors.reduce(
+    ([full, other], contributor) => {
+      if (FULL_TIMERS.includes(contributor[0])) {
+        return [[...full, contributor], other]
+      }
+      return [full, [...other, contributor]]
+    },
+    [[] as [string, ContributorStats][], [] as [string, ContributorStats][]]
+  )
+
+  // Get top 3 contributors from non-full-timers
+  const podiumContributors = otherContributors.slice(0, 3)
+  const remainingContributors = otherContributors.slice(3).filter(
+    ([username]) => !FULL_TIMERS.includes(username)
+  )
 
   const PodiumEntry = ({
     position,
@@ -29,35 +44,35 @@ export function ContributorOverview({
     onClick,
   }: PodiumEntryProps) => {
     const sizes = {
-      sm: "md:w-20 md:h-20",
-      md: "md:w-24 md:h-24",
-      lg: "md:w-32 md:h-32",
+      sm: "md:w-24 md:h-24",
+      md: "md:w-28 md:h-28",
+      lg: "md:w-36 md:h-36",
     }
 
     const badgeSizes = {
       sm: "md:w-8 md:h-8 text-base",
-      md: "md:w-8 md:h-8 text-base",
-      lg: "md:w-10 md:h-10 md:text-xl text-base",
+      md: "md:w-10 md:h-10 text-lg",
+      lg: "md:w-12 md:h-12 md:text-2xl text-lg",
     }
 
     const nameSizes = {
       sm: "md:text-lg",
-      md: "md:text-lg",
-      lg: "md:text-xl",
+      md: "md:text-xl",
+      lg: "md:text-2xl",
     }
 
     return (
       <div className="flex flex-col md:items-center w-full md:w-auto">
-        <div className="flex items-center md:flex-col gap-4 md:gap-0">
+        <div className="flex items-center md:flex-col gap-4 md:gap-2">
           <div className="relative">
             <img
               src={getAvatarUrl(username)}
               alt={`${username}'s avatar`}
-              className={`w-24 h-24 ${sizes[size]} rounded-full mb-0 md:mb-3 cursor-pointer ring-4 ${ringColor} hover:ring-8 transition-all`}
+              className={`w-28 h-28 ${sizes[size]} rounded-full mb-0 md:mb-4 cursor-pointer ring-4 ${ringColor} hover:ring-8 transition-all`}
               onClick={onClick}
             />
             <div
-              className={`absolute -top-2 -right-2 w-8 h-8 ${badgeSizes[size]} ${bgColor} rounded-full flex items-center justify-center text-white font-bold`}
+              className={`absolute -top-2 -right-2 w-10 h-10 ${badgeSizes[size]} ${bgColor} rounded-full flex items-center justify-center text-white font-bold`}
             >
               {position}
             </div>
@@ -65,7 +80,7 @@ export function ContributorOverview({
 
           <div className="flex flex-col md:items-center flex-1 md:flex-initial">
             <div
-              className={`${nameSizes[size]} font-medium text-gray-900 mb-1`}
+              className={`${nameSizes[size]} font-medium text-gray-900 mb-2`}
             >
               <a
                 href={getProfileUrl(username)}
@@ -76,25 +91,25 @@ export function ContributorOverview({
                 {username}
               </a>
             </div>
-            <div className="flex gap-1 text-yellow-400 mb-2">{stats.stars}</div>
+            <div className="flex gap-1 text-yellow-400 mb-3">{stats.stars}</div>
 
-            <div className="flex flex-wrap gap-x-4 md:gap-x-6 gap-y-2 text-sm text-gray-600 mb-2">
+            <div className="flex flex-wrap gap-x-4 md:gap-x-6 gap-y-2 text-sm md:text-base text-gray-600 mb-3">
               {STATS_CONFIG.map((stat) => {
                 const Icon = stat.icon
                 return (
-                  <div key={stat.key} className="flex items-center gap-1">
-                    <Icon className="w-4 h-4" />
+                  <div key={stat.key} className="flex items-center gap-1.5">
+                    <Icon className="w-5 h-5" />
                     <span>{stat.getValue(stats)}</span>
                   </div>
                 )
               })}
             </div>
 
-            <div className="flex flex-wrap gap-x-4 gap-y-1 items-center">
+            <div className="flex flex-wrap gap-x-4 gap-y-1.5 items-center">
               {Object.values(CONTRIBUTION_TYPES).map((type) => (
                 <div
                   key={type.value}
-                  className={`font-medium ${type.colorClass}`}
+                  className={`font-medium ${type.colorClass} md:text-lg`}
                 >
                   {type.emoji} {stats[type.value] || 0}
                 </div>
@@ -129,47 +144,89 @@ export function ContributorOverview({
 
   return (
     <section className="mt-20 mb-16 max-w-7xl mx-auto px-4">
-      <h2 className="text-3xl font-bold text-center mb-12">
-        🏆 Top 3 Contributors 🏆
-      </h2>
-
-      {/* Podium */}
-      <div className="flex flex-col md:flex-row justify-center items-stretch md:items-end gap-8 mb-12">
-        {/* Second Place */}
-        {podiumContributors[1] && (
-          <div className="order-2 md:order-1">
-            <PodiumEntry
-              {...podiumStyles[1]}
-              username={podiumContributors[1][0]}
-              stats={podiumContributors[1][1]}
-              onClick={() => onSelectContributor(podiumContributors[1][0])}
-            />
+      <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 mb-12">
+        {fullTimerContributors.length > 0 && (
+          <div className="md:w-1/5">
+            <h3 className="text-lg font-semibold mb-3">Full-time</h3>
+            <div className="space-y-2">
+              {fullTimerContributors.map(([username, stats]) => (
+                <div
+                  key={username}
+                  onClick={() => onSelectContributor(username)}
+                  className="bg-white rounded-lg shadow-sm p-3 cursor-pointer hover:shadow-md transition-shadow"
+                >
+                  <div className="flex items-center gap-3">
+                    <img
+                      src={getAvatarUrl(username)}
+                      alt={`${username}'s avatar`}
+                      className="w-10 h-10 rounded-full"
+                    />
+                    <div>
+                      <div className="font-medium">
+                        <a
+                          href={getProfileUrl(username)}
+                          target="_blank"
+                          rel="noopener noreferrer"
+                          className="text-black hover:text-blue-800"
+                        >
+                          {username}
+                        </a>
+                      </div>
+                      <div className="text-sm text-gray-500">
+                        Score: {stats.score || 0}
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              ))}
+            </div>
           </div>
         )}
 
+        <div className="md:flex-grow">
+          <h2 className="text-3xl font-bold text-center mb-10">
+            🏆 Top 3 Contributors 🏆
+          </h2>
+          
+          {/* Podium */}
+          <div className="flex flex-col md:flex-row justify-center items-stretch md:items-end gap-10 md:gap-12">
+            {/* Second Place */}
+            {podiumContributors[1] && (
+              <div className="order-2 md:order-1">
+                <PodiumEntry
+                  {...podiumStyles[1]}
+                  username={podiumContributors[1][0]}
+                  stats={podiumContributors[1][1]}
+                  onClick={() => onSelectContributor(podiumContributors[1][0])}
+                />
+              </div>
+            )}
+
         {/* First Place */}
-        {podiumContributors[0] && (
-          <div className="order-1 md:order-2">
-            <PodiumEntry
-              {...podiumStyles[0]}
-              username={podiumContributors[0][0]}
-              stats={podiumContributors[0][1]}
-              onClick={() => onSelectContributor(podiumContributors[0][0])}
-            />
-          </div>
-        )}
+            {podiumContributors[0] && (
+              <div className="order-1 md:order-2">
+                <PodiumEntry
+                  {...podiumStyles[0]}
+                  username={podiumContributors[0][0]}
+                  stats={podiumContributors[0][1]}
+                  onClick={() => onSelectContributor(podiumContributors[0][0])}
+                />
+              </div>
+            )}
 
         {/* Third Place */}
-        {podiumContributors[2] && (
-          <div className="order-3">
-            <PodiumEntry
-              {...podiumStyles[2]}
-              username={podiumContributors[2][0]}
-              stats={podiumContributors[2][1]}
-              onClick={() => onSelectContributor(podiumContributors[2][0])}
-            />
+            {podiumContributors[2] && (
+              <div className="order-3">
+                <PodiumEntry
+                  {...podiumStyles[2]}
+                  username={podiumContributors[2][0]}
+                  stats={podiumContributors[2][1]}
+                  onClick={() => onSelectContributor(podiumContributors[2][0])}
+                />
+              </div>
+            )}
           </div>
-        )}
+        </div>
       </div>
 
       {/* Show All Contributors Button */}

From e86ebb354d7bdb1dd9100281f3234fe8a08ae1cd Mon Sep 17 00:00:00 2001
From: Ayush Jhawar <ayushjhawar499@gmail.com>
Date: Thu, 13 Feb 2025 22:29:39 +0530
Subject: [PATCH 2/6] all stats

---
 .../src/components/ContributorOverview.tsx    | 23 ++++++++++++++++++-
 1 file changed, 22 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/ContributorOverview.tsx b/frontend/src/components/ContributorOverview.tsx
index 3553f5d..bd12e97 100644
--- a/frontend/src/components/ContributorOverview.tsx
+++ b/frontend/src/components/ContributorOverview.tsx
@@ -161,7 +161,7 @@ export function ContributorOverview({
                       alt={`${username}'s avatar`}
                       className="w-10 h-10 rounded-full"
                     />
-                    <div>
+                    <div className="flex-grow">
                       <div className="font-medium">
                         <a
                           href={getProfileUrl(username)}
@@ -175,6 +175,27 @@ export function ContributorOverview({
                       <div className="text-sm text-gray-500">
                         Score: {stats.score || 0}
                       </div>
+                      <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs text-gray-600 mt-1 mb-2">
+                        {STATS_CONFIG.map((stat) => {
+                          const Icon = stat.icon
+                          return (
+                            <div key={stat.key} className="flex items-center gap-1">
+                              <Icon className="w-3.5 h-3.5" />
+                              <span>{stat.getValue(stats)}</span>
+                            </div>
+                          )
+                        })}
+                      </div>
+                      <div className="flex flex-wrap gap-x-4 gap-y-1.5 items-center">
+                        {Object.values(CONTRIBUTION_TYPES).map((type) => (
+                          <div
+                            key={type.value}
+                            className={`text-sm ${type.colorClass}`}
+                          >
+                            {type.emoji} {stats[type.value] || 0}
+                          </div>
+                        ))}
+                      </div>
                     </div>
                   </div>
                 </div>

From 8da4aed6f7a6fed9090ad338dcfc483f43d4b2b0 Mon Sep 17 00:00:00 2001
From: Ayush Jhawar <ayushjhawar499@gmail.com>
Date: Thu, 13 Feb 2025 22:58:45 +0530
Subject: [PATCH 3/6] fix layout and stat for full timer

---
 .../src/components/ContributorOverview.tsx    | 38 +++++++++++--------
 1 file changed, 22 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/ContributorOverview.tsx b/frontend/src/components/ContributorOverview.tsx
index bd12e97..e562d69 100644
--- a/frontend/src/components/ContributorOverview.tsx
+++ b/frontend/src/components/ContributorOverview.tsx
@@ -155,14 +155,17 @@ export function ContributorOverview({
                   onClick={() => onSelectContributor(username)}
                   className="bg-white rounded-lg shadow-sm p-3 cursor-pointer hover:shadow-md transition-shadow"
                 >
-                  <div className="flex items-center gap-3">
-                    <img
-                      src={getAvatarUrl(username)}
-                      alt={`${username}'s avatar`}
-                      className="w-10 h-10 rounded-full"
-                    />
-                    <div className="flex-grow">
-                      <div className="font-medium">
+                  <div className="flex items-center gap-4">
+                    <div className="relative">
+                      <img
+                        src={getAvatarUrl(username)}
+                        alt={`${username}'s avatar`}
+                        className="w-14 h-14 rounded-full ring-2 ring-blue-400"
+                      />
+                    </div>
+
+                    <div className="flex-grow min-w-0">
+                      <div className="font-medium text-gray-900">
                         <a
                           href={getProfileUrl(username)}
                           target="_blank"
@@ -172,15 +175,18 @@ export function ContributorOverview({
                           {username}
                         </a>
                       </div>
-                      <div className="text-sm text-gray-500">
-                        Score: {stats.score || 0}
+                      <div className="text-yellow-400 text-sm mb-2">
+                        {stats.stars}
                       </div>
-                      <div className="flex flex-wrap gap-x-3 gap-y-1 text-xs text-gray-600 mt-1 mb-2">
+                      <div className="flex flex-wrap gap-x-4 md:gap-x-6 gap-y-2 text-sm text-gray-600 mb-2">
                         {STATS_CONFIG.map((stat) => {
                           const Icon = stat.icon
                           return (
-                            <div key={stat.key} className="flex items-center gap-1">
-                              <Icon className="w-3.5 h-3.5" />
+                            <div
+                              key={stat.key}
+                              className="flex items-center gap-1.5"
+                            >
+                              <Icon className="w-4 h-4" />
                               <span>{stat.getValue(stats)}</span>
                             </div>
                           )
@@ -208,7 +214,7 @@ export function ContributorOverview({
           <h2 className="text-3xl font-bold text-center mb-10">
             🏆 Top 3 Contributors 🏆
           </h2>
-          
+
           {/* Podium */}
           <div className="flex flex-col md:flex-row justify-center items-stretch md:items-end gap-10 md:gap-12">
             {/* Second Place */}
@@ -223,7 +229,7 @@ export function ContributorOverview({
               </div>
             )}
 
-        {/* First Place */}
+            {/* First Place */}
             {podiumContributors[0] && (
               <div className="order-1 md:order-2">
                 <PodiumEntry
@@ -235,7 +241,7 @@ export function ContributorOverview({
               </div>
             )}
 
-        {/* Third Place */}
+            {/* Third Place */}
             {podiumContributors[2] && (
               <div className="order-3">
                 <PodiumEntry

From 9a50f82218c80b46cd8fc3810e1fcdd6954e51ad Mon Sep 17 00:00:00 2001
From: Ayush Jhawar <ayushjhawar499@gmail.com>
Date: Sat, 15 Feb 2025 22:10:30 +0530
Subject: [PATCH 4/6] create constant

---
 frontend/src/components/ContributorOverview.tsx | 11 +++++------
 frontend/src/constants/contributors.ts          |  1 +
 2 files changed, 6 insertions(+), 6 deletions(-)
 create mode 100644 frontend/src/constants/contributors.ts

diff --git a/frontend/src/components/ContributorOverview.tsx b/frontend/src/components/ContributorOverview.tsx
index e562d69..c733170 100644
--- a/frontend/src/components/ContributorOverview.tsx
+++ b/frontend/src/components/ContributorOverview.tsx
@@ -8,8 +8,7 @@ import {
 import { ContributorCard } from "./ContributorCard"
 import { getAvatarUrl, getProfileUrl } from "../constants/github"
 import { CONTRIBUTION_TYPES, STATS_CONFIG } from "../constants/metrics"
-
-const FULL_TIMERS = ["seveibar", "imrishabh18"]
+import { FULL_TIMERS } from "../constants/contributors"
 
 export function ContributorOverview({
   contributors,
@@ -25,14 +24,14 @@ export function ContributorOverview({
       }
       return [full, [...other, contributor]]
     },
-    [[] as [string, ContributorStats][], [] as [string, ContributorStats][]]
+    [[] as [string, ContributorStats][], [] as [string, ContributorStats][]],
   )
 
   // Get top 3 contributors from non-full-timers
   const podiumContributors = otherContributors.slice(0, 3)
-  const remainingContributors = otherContributors.slice(3).filter(
-    ([username]) => !FULL_TIMERS.includes(username)
-  )
+  const remainingContributors = otherContributors
+    .slice(3)
+    .filter(([username]) => !FULL_TIMERS.includes(username))
 
   const PodiumEntry = ({
     position,
diff --git a/frontend/src/constants/contributors.ts b/frontend/src/constants/contributors.ts
new file mode 100644
index 0000000..ecbba92
--- /dev/null
+++ b/frontend/src/constants/contributors.ts
@@ -0,0 +1 @@
+export const FULL_TIMERS = ["seveibar", "imrishabh18"]

From f3001c9981eef4b395e710f70ca2fdc87050a991 Mon Sep 17 00:00:00 2001
From: Ayush Jhawar <ayushjhawar499@gmail.com>
Date: Tue, 18 Feb 2025 23:52:11 +0530
Subject: [PATCH 5/6] fix layout

---
 .../src/components/ContributorOverview.tsx    | 85 ++++++++++---------
 1 file changed, 43 insertions(+), 42 deletions(-)

diff --git a/frontend/src/components/ContributorOverview.tsx b/frontend/src/components/ContributorOverview.tsx
index c733170..aa6fe0d 100644
--- a/frontend/src/components/ContributorOverview.tsx
+++ b/frontend/src/components/ContributorOverview.tsx
@@ -154,53 +154,54 @@ export function ContributorOverview({
                   onClick={() => onSelectContributor(username)}
                   className="bg-white rounded-lg shadow-sm p-3 cursor-pointer hover:shadow-md transition-shadow"
                 >
-                  <div className="flex items-center gap-4">
-                    <div className="relative">
-                      <img
-                        src={getAvatarUrl(username)}
-                        alt={`${username}'s avatar`}
-                        className="w-14 h-14 rounded-full ring-2 ring-blue-400"
-                      />
-                    </div>
-
-                    <div className="flex-grow min-w-0">
-                      <div className="font-medium text-gray-900">
-                        <a
-                          href={getProfileUrl(username)}
-                          target="_blank"
-                          rel="noopener noreferrer"
-                          className="text-black hover:text-blue-800"
-                        >
-                          {username}
-                        </a>
+                  <div className="flex flex-col">
+                    <div className="flex items-center gap-3 sm:gap-5 mb-5">
+                      <div className="relative flex-shrink-0">
+                        <img
+                          src={getAvatarUrl(username)}
+                          alt={`${username}'s avatar`}
+                          className="w-12 sm:w-14 h-12 sm:h-14 rounded-full ring-2 ring-blue-400"
+                        />
                       </div>
-                      <div className="text-yellow-400 text-sm mb-2">
-                        {stats.stars}
-                      </div>
-                      <div className="flex flex-wrap gap-x-4 md:gap-x-6 gap-y-2 text-sm text-gray-600 mb-2">
-                        {STATS_CONFIG.map((stat) => {
-                          const Icon = stat.icon
-                          return (
-                            <div
-                              key={stat.key}
-                              className="flex items-center gap-1.5"
-                            >
-                              <Icon className="w-4 h-4" />
-                              <span>{stat.getValue(stats)}</span>
-                            </div>
-                          )
-                        })}
+                      <div className="min-w-0">
+                        <div className="font-medium text-gray-900 truncate">
+                          <a
+                            href={getProfileUrl(username)}
+                            target="_blank"
+                            rel="noopener noreferrer"
+                            className="text-black hover:text-blue-800"
+                          >
+                            {username}
+                          </a>
+                        </div>
+                        <div className="text-yellow-400 text-sm mt-1">
+                          {stats.stars}
+                        </div>
                       </div>
-                      <div className="flex flex-wrap gap-x-4 gap-y-1.5 items-center">
-                        {Object.values(CONTRIBUTION_TYPES).map((type) => (
+                    </div>
+                    <div className="flex flex-wrap justify-center gap-x-4 md:gap-x-6 gap-y-2 text-sm text-gray-600 mb-2">
+                      {STATS_CONFIG.map((stat) => {
+                        const Icon = stat.icon
+                        return (
                           <div
-                            key={type.value}
-                            className={`text-sm ${type.colorClass}`}
+                            key={stat.key}
+                            className="flex items-center gap-1.5"
                           >
-                            {type.emoji} {stats[type.value] || 0}
+                            <Icon className="w-4 h-4" />
+                            <span>{stat.getValue(stats)}</span>
                           </div>
-                        ))}
-                      </div>
+                        )
+                      })}
+                    </div>
+                    <div className="flex flex-wrap justify-center gap-x-4 gap-y-1.5 items-center">
+                      {Object.values(CONTRIBUTION_TYPES).map((type) => (
+                        <div
+                          key={type.value}
+                          className={`text-sm ${type.colorClass}`}
+                        >
+                          {type.emoji} {stats[type.value] || 0}
+                        </div>
+                      ))}
                     </div>
                   </div>
                 </div>

From 7f40a97ea0a358f4f85eb5767e5eaf826d93891e Mon Sep 17 00:00:00 2001
From: Ayush Jhawar <ayushjhawar499@gmail.com>
Date: Wed, 19 Feb 2025 14:22:47 +0530
Subject: [PATCH 6/6] fix size of full timer

---
 frontend/src/components/ContributorOverview.tsx | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/ContributorOverview.tsx b/frontend/src/components/ContributorOverview.tsx
index aa6fe0d..7744c3a 100644
--- a/frontend/src/components/ContributorOverview.tsx
+++ b/frontend/src/components/ContributorOverview.tsx
@@ -145,7 +145,7 @@ export function ContributorOverview({
     <section className="mt-20 mb-16 max-w-7xl mx-auto px-4">
       <div className="flex flex-col md:flex-row justify-between items-stretch gap-8 mb-12">
         {fullTimerContributors.length > 0 && (
-          <div className="md:w-1/5">
+          <div className="md:w-[14%]">
             <h3 className="text-lg font-semibold mb-3">Full-time</h3>
             <div className="space-y-2">
               {fullTimerContributors.map(([username, stats]) => (
@@ -155,12 +155,12 @@ export function ContributorOverview({
                   className="bg-white rounded-lg shadow-sm p-3 cursor-pointer hover:shadow-md transition-shadow"
                 >
                   <div className="flex flex-col">
-                    <div className="flex items-center gap-3 sm:gap-5 mb-5">
+                    <div className="flex items-center gap-3 sm:gap-3 mb-4">
                       <div className="relative flex-shrink-0">
                         <img
                           src={getAvatarUrl(username)}
                           alt={`${username}'s avatar`}
-                          className="w-12 sm:w-14 h-12 sm:h-14 rounded-full ring-2 ring-blue-400"
+                          className="w-11 h-11 rounded-full ring-2 ring-blue-400"
                         />
                       </div>
                       <div className="min-w-0">
@@ -174,18 +174,18 @@ export function ContributorOverview({
                             {username}
                           </a>
                         </div>
-                        <div className="text-yellow-400 text-sm mt-1">
+                        <div className="text-yellow-400 text-xs">
                           {stats.stars}
                         </div>
                       </div>
                     </div>
-                    <div className="flex flex-wrap justify-center gap-x-4 md:gap-x-6 gap-y-2 text-sm text-gray-600 mb-2">
+                    <div className="flex flex-wrap gap-x-3 gap-y-2 text-xs text-gray-600 mb-1">
                       {STATS_CONFIG.map((stat) => {
                         const Icon = stat.icon
                         return (
                           <div
                             key={stat.key}
-                            className="flex items-center gap-1.5"
+                            className="flex items-center gap-0.5"
                           >
                             <Icon className="w-4 h-4" />
                             <span>{stat.getValue(stats)}</span>
@@ -193,7 +193,7 @@ export function ContributorOverview({
                         )
                       })}
                     </div>
-                    <div className="flex flex-wrap justify-center gap-x-4 gap-y-1.5 items-center">
+                    <div className="flex flex-wrap gap-x-1.5 gap-y-0.5 items-center mt-1">
                       {Object.values(CONTRIBUTION_TYPES).map((type) => (
                         <div
                           key={type.value}