chore: aling to the middle for charts components for now

components/charts/SeverityChart.tsx

@@ -40,35 +40,37 @@ const chartConfig = {
 
 export const SeverityChart = () => {
   return (
-    <ChartContainer config={chartConfig}>
-      <BarChart accessibilityLayer data={chartData} layout="vertical">
-        <YAxis
-          dataKey="severity"
-          type="category"
-          tickLine={false}
-          tickMargin={10}
-          axisLine={false}
-          tickFormatter={(value) =>
-            chartConfig[value as keyof typeof chartConfig]?.label
-          }
-        />
-        <XAxis dataKey="findings" type="number" hide>
-          <LabelList position="insideTop" offset={12} fontSize={12} />
-        </XAxis>
-        <ChartTooltip
-          cursor={false}
-          content={<ChartTooltipContent indicator="line" />}
-        />
-
-        <Bar dataKey="findings" layout="vertical" radius={12}>
-          <LabelList
-            position="insideRight"
-            offset={10}
-            className="fill-foreground font-bold"
-            fontSize={12}
+    <div className="my-auto">
+      <ChartContainer config={chartConfig}>
+        <BarChart accessibilityLayer data={chartData} layout="vertical">
+          <YAxis
+            dataKey="severity"
+            type="category"
+            tickLine={false}
+            tickMargin={10}
+            axisLine={false}
+            tickFormatter={(value) =>
+              chartConfig[value as keyof typeof chartConfig]?.label
+            }
           />
-        </Bar>
-      </BarChart>
-    </ChartContainer>
+          <XAxis dataKey="findings" type="number" hide>
+            <LabelList position="insideTop" offset={12} fontSize={12} />
+          </XAxis>
+          <ChartTooltip
+            cursor={false}
+            content={<ChartTooltipContent indicator="line" />}
+          />
+
+          <Bar dataKey="findings" layout="vertical" radius={12}>
+            <LabelList
+              position="insideRight"
+              offset={10}
+              className="fill-foreground font-bold"
+              fontSize={12}
+            />
+          </Bar>
+        </BarChart>
+      </ChartContainer>
+    </div>
   );
 };

components/charts/StatusChart.tsx

@@ -55,7 +55,7 @@ export function StatusChart() {
   }, []);
 
   return (
-    <div className="flex">
+    <div className="flex items-center justify-center self-center my-auto">
       <ChartContainer
         config={chartConfig}
         className="mx-auto aspect-square min-w-[200px] md:min-h-[250px]"
@@ -102,7 +102,7 @@ export function StatusChart() {
           </Pie>
         </PieChart>
       </ChartContainer>
-      <div className="flex flex-col justify-center gap-y-2 mx-6">
+      <div className="flex flex-col justify-center gap-2 mx-6 text-small">
         <div className="flex space-x-4">
           <Chip
             className="h-5"