Fixed responsiveness

src/components/dashboard/IpPoolChart.tsx

@@ -38,26 +38,26 @@ export function IpPoolChart({
   ];
 
   return (
-    <Card className="flex h-full flex-col">
-      <div>
+    <Card className="flex h-full min-h-[380px] flex-col overflow-hidden">
+      <div className="shrink-0">
         <h3 className="font-semibold text-white">
           Uso da Pool IP
         </h3>
 
-        <p className="text-xs text-slate-500">
+        <p className="mt-1 text-xs text-slate-500">
           Capacidade de atribuição WireGuard
         </p>
       </div>
 
       <div className="flex min-h-0 flex-1 flex-col justify-center">
-        <div className="relative mx-auto h-56 w-56">
+        <div className="relative mx-auto h-40 w-40 sm:h-48 sm:w-48 xl:h-44 xl:w-44 2xl:h-56 2xl:w-56">
           <ResponsiveContainer width="100%" height="100%">
             <PieChart>
               <Pie
                 data={data}
                 dataKey="value"
-                innerRadius={76}
-                outerRadius={100}
+                innerRadius="72%"
+                outerRadius="92%"
                 startAngle={90}
                 endAngle={-270}
                 paddingAngle={2}
@@ -77,7 +77,7 @@ export function IpPoolChart({
           </ResponsiveContainer>
 
           <div className="absolute inset-0 flex flex-col items-center justify-center">
-            <p className="text-4xl font-bold text-white">
+            <p className="text-3xl font-black text-white 2xl:text-4xl">
               {displayPercentage}%
             </p>
 
@@ -87,31 +87,35 @@ export function IpPoolChart({
           </div>
         </div>
 
-        <div className="mt-8 space-y-4">
-          <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-            <p className="text-xs uppercase tracking-wide text-slate-500">
-              IPs Usados
-            </p>
+        <div className="mt-5 grid gap-3 2xl:mt-8">
+          <div className="grid grid-cols-2 gap-3">
+            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3 2xl:p-4">
+              <p className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+                Usados
+              </p>
 
-            <p className="mt-1 text-2xl font-bold text-green-300">
-              {used}
-            </p>
+              <p className="mt-1 truncate text-xl font-black text-green-300 2xl:text-2xl">
+                {used}
+              </p>
+            </div>
+
+            <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3 2xl:p-4">
+              <p className="text-[10px] font-semibold uppercase tracking-wide text-slate-500">
+                Livres
+              </p>
+
+              <p className="mt-1 truncate text-xl font-black text-blue-300 2xl:text-2xl">
+                {available}
+              </p>
+            </div>
           </div>
 
-          <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-            <p className="text-xs uppercase tracking-wide text-slate-500">
-              IPs Disponíveis
-            </p>
-
-            <p className="mt-1 text-2xl font-bold text-blue-300">
-              {available}
-            </p>
-          </div>
-
-          <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-4">
-            <div className="mb-2 flex justify-between text-xs text-slate-500">
+          <div className="rounded-2xl border border-white/10 bg-white/[0.03] p-3 2xl:p-4">
+            <div className="mb-2 flex justify-between gap-3 text-xs text-slate-500">
               <span>Capacidade</span>
-              <span>{used} / {total}</span>
+              <span className="truncate">
+                {used} / {total}
+              </span>
             </div>
 
             <div className="h-2 overflow-hidden rounded-full bg-slate-800">