feat: improve RadarChart responsiveness with client-side rendering

- Introduced useEffect and useState to manage component mounting, ensuring the chart renders correctly on the client side.
- Updated the rendering logic to prevent SSR issues with ResponsiveContainer dimensions, enhancing layout stability.

src/components/RadarChart.tsx

@@ -1,5 +1,6 @@
 "use client";
 
+import { useEffect, useState } from "react";
 import {
   Radar,
   RadarChart as RechartsRadar,
@@ -43,19 +44,24 @@ const DARK = {
 
 export function RadarChart({ data, compact }: RadarChartProps) {
   const { theme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    // Defer chart until client so ResponsiveContainer can measure parent (avoids width/height -1 on SSR)
+    const raf = requestAnimationFrame(() => setMounted(true));
+    return () => cancelAnimationFrame(raf);
+  }, []);
   const c = theme === "dark" ? DARK : LIGHT;
 
   if (data.length === 0) return null;
 
-  const initialH = compact ? 112 : 288;
+  // ResponsiveContainer needs real DOM dimensions; avoid -1 on SSR
-  const initialW = 300;
+  if (!mounted) {
+    return <div className={compact ? "h-28 w-full" : "h-72 w-full"} aria-hidden />;
+  }
+
   return (
     <div className={compact ? "h-28 w-full" : "h-72 w-full"}>
-      <ResponsiveContainer
+      <ResponsiveContainer width="100%" height="100%">
-        width="100%"
-        height="100%"
-        initialDimension={{ width: initialW, height: initialH }}
-      >
         <RechartsRadar data={data}>
           <PolarGrid stroke={c.grid} />
           <PolarAngleAxis dataKey="dimension" tick={{ fontSize: compact ? 7 : 9, fill: c.axis }} />