This is the template for us to work on.

src/components/dashboard/leads-per-month-chart.tsx

@@ -22,8 +22,8 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
   const [hovered, setHovered] = useState<number | null>(null)
 
   const width = 880
-  const height = 380
-  const padding = { top: 28, right: 24, bottom: 44, left: 44 }
+  const height = 620
+  const padding = { top: 128, right: 24, bottom: 48, left: 44 }
   const chartW = width - padding.left - padding.right
   const chartH = height - padding.top - padding.bottom
 
@@ -55,8 +55,9 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
       initial={{ opacity: 0, y: 20 }}
       animate={{ opacity: 1, y: 0 }}
       transition={{ duration: 0.3, delay: 0.3 }}
+      className="h-full"
     >
-      <Card>
+      <Card className="h-full">
         <CardHeader>
           <div className="flex items-start justify-between">
             <div>
@@ -77,12 +78,12 @@ export function LeadsPerMonthChart({ data }: LeadsPerMonthChartProps) {
             </div>
           </div>
         </CardHeader>
-        <CardContent>
-          <div className="relative">
+        <CardContent className="flex flex-1 flex-col">
+          <div className="relative flex-1">
             <svg
               viewBox={`0 0 ${width} ${height}`}
               width="100%"
-              height="auto"
+              height="100%"
               className="block overflow-visible"
             >
               <defs>