chore: add responsive container to pie chart

apps/marketing/src/app/(marketing)/open/cap-table.tsx

@@ -2,7 +2,7 @@
 
 import { HTMLAttributes, useEffect, useState } from 'react';
 
-import { Cell, Pie, PieChart, Tooltip } from 'recharts';
+import { Cell, Pie, PieChart, ResponsiveContainer, Tooltip } from 'recharts';
 
 import { cn } from '@documenso/ui/lib/utils';
 
@@ -53,28 +53,30 @@ export const CapTable = ({ className, ...props }: CapTableProps) => {
 
       <div className="border-border mt-2.5 flex flex-1 items-center justify-center rounded-2xl border shadow-sm hover:shadow">
         {!isSSR && (
-          <PieChart width={400} height={400}>
+          <ResponsiveContainer width="100%" height={400}>
-            <Pie
+            <PieChart>
-              data={CAP_TABLE}
+              <Pie
-              cx="50%"
+                data={CAP_TABLE}
-              cy="50%"
+                cx="50%"
-              labelLine={false}
+                cy="50%"
-              label={renderCustomizedLabel}
+                labelLine={false}
-              outerRadius={180}
+                label={renderCustomizedLabel}
-              innerRadius={100}
+                outerRadius={160}
-              fill="#8884d8"
+                innerRadius={80}
-              dataKey="percentage"
+                fill="#8884d8"
-            >
+                dataKey="percentage"
-              {CAP_TABLE.map((entry, index) => (
+              >
-                <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
+                {CAP_TABLE.map((entry, index) => (
-              ))}
+                  <Cell key={`cell-${index}`} fill={COLORS[index % COLORS.length]} />
-            </Pie>
+                ))}
-            <Tooltip
+              </Pie>
-              formatter={(percent: number, name, props) => {
+              <Tooltip
-                return [`${percent}%`, name || props['name'] || props['payload']['name']];
+                formatter={(percent: number, name, props) => {
-              }}
+                  return [`${percent}%`, name || props['name'] || props['payload']['name']];
-            />
+                }}
-          </PieChart>
+              />
+            </PieChart>
+          </ResponsiveContainer>
         )}
       </div>
     </div>