From 68f783b1f867b7188210a3cca74a26123ae97654 Mon Sep 17 00:00:00 2001
From: Matt <mattskent@gmail.com>
Date: Fri, 27 Dec 2024 20:58:39 -0500
Subject: [PATCH] Fix header card sizing

---
 dashboard/src/components/dashboard/MetaCampaigns.jsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/dashboard/src/components/dashboard/MetaCampaigns.jsx b/dashboard/src/components/dashboard/MetaCampaigns.jsx
index 2e6ce10..b55c682 100644
--- a/dashboard/src/components/dashboard/MetaCampaigns.jsx
+++ b/dashboard/src/components/dashboard/MetaCampaigns.jsx
@@ -67,15 +67,15 @@ const summaryCard = (label, value, options = {}) => {
   }
 
   return (
-    <Card>
-      <CardContent className="pt-6">
+    <Card className="h-full">
+      <CardContent className="pt-6 h-full">
         <div className="flex justify-between items-start">
-          <div>
+          <div className="flex-1 min-w-0">
             <p className="text-sm font-medium text-muted-foreground">{label}</p>
             <p className="text-2xl font-bold">{displayValue}</p>
           </div>
           {Icon && (
-            <Icon className={`h-5 w-5 ${iconColor || "text-blue-500"}`} />
+            <Icon className={`h-5 w-5 flex-shrink-0 ml-2 ${iconColor || "text-blue-500"}`} />
           )}
         </div>
       </CardContent>
@@ -429,7 +429,7 @@ const MetaCampaigns = () => {
             </SelectContent>
           </Select>
         </div>
-        <div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4">
+        <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 gap-4">
           {[
             {
               label: "Active Campaigns",
@@ -492,7 +492,7 @@ const MetaCampaigns = () => {
               options: { isMonetary: true, decimalPlaces: 0, icon: DollarSign, iconColor: "text-lime-500" },
             },
           ].map((card) => (
-            <div key={card.label} className="min-w-[140px]">
+            <div key={card.label} className="h-full">
               {summaryCard(card.label, card.value, card.options)}
             </div>
           ))}