From b52d96b645af9565fca2ceb3bc7534e095d3fcb4 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Sat, 21 Jun 2025 11:14:24 +0800
Subject: [PATCH] feat(analysis): wrap analysis panel with PanelLayout and
 ScrollArea

---
 .../problems/analysis/components/panel.tsx    | 90 ++++++++++---------
 1 file changed, 50 insertions(+), 40 deletions(-)

diff --git a/src/features/problems/analysis/components/panel.tsx b/src/features/problems/analysis/components/panel.tsx
index cdb393c..c8c54aa 100644
--- a/src/features/problems/analysis/components/panel.tsx
+++ b/src/features/problems/analysis/components/panel.tsx
@@ -7,7 +7,12 @@ import {
   CardFooter,
 } from "@/components/ui/card";
 import prisma from "@/lib/prisma";
-import { ChartDataPoint, CodeAnalysisRadarChart } from "./radar-chart";
+import {
+  ChartDataPoint,
+  CodeAnalysisRadarChart,
+} from "@/features/problems/analysis/components/radar-chart";
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 
 export const description = "A server component to fetch code analysis data.";
 
@@ -68,46 +73,51 @@ export const AnalysisPanel = async ({ submissionId }: AnalysisPanelProps) => {
   ];
 
   return (
-    <Card className="w-full max-w-2xl mx-auto shadow-lg rounded-xl overflow-hidden border-0 bg-background/50 backdrop-blur-sm animate-fade-in">
-      <CardHeader className="items-center pb-2 space-y-1 px-6 pt-6">
-        <CardTitle className="text-2xl font-bold bg-gradient-to-r from-primary to-foreground bg-clip-text text-transparent">
-          Code Analysis
-        </CardTitle>
-        <CardDescription className="text-muted-foreground">
-          Detailed evaluation of your code submission
-        </CardDescription>
-      </CardHeader>
-      <CardContent className="p-6">
-        <CodeAnalysisRadarChart chartData={chartData} />
-      </CardContent>
+    <PanelLayout>
+      <ScrollArea className="h-full">
+        <Card className="w-full max-w-2xl mx-auto shadow-lg rounded-xl overflow-hidden border-0 bg-background/50 backdrop-blur-sm animate-fade-in">
+          <CardHeader className="items-center pb-2 space-y-1 px-6 pt-6">
+            <CardTitle className="text-2xl font-bold bg-gradient-to-r from-primary to-foreground bg-clip-text text-transparent">
+              Code Analysis
+            </CardTitle>
+            <CardDescription className="text-muted-foreground">
+              Detailed evaluation of your code submission
+            </CardDescription>
+          </CardHeader>
+          <CardContent className="p-6">
+            <CodeAnalysisRadarChart chartData={chartData} />
+          </CardContent>
 
-      <CardFooter className="flex-col items-start gap-4 p-6 pt-0">
-        <div className="w-full space-y-3">
-          <div className="flex justify-between text-sm font-medium">
-            <span className="text-muted-foreground">Overall Score</span>
-            <span className="text-primary">
-              {codeAnalysisData.overallScore ?? "N/A"}
-              <span className="text-muted-foreground">/100</span>
-            </span>
-          </div>
-          <div className="relative h-2.5 w-full overflow-hidden rounded-full bg-muted">
-            <div
-              className="h-full bg-gradient-to-r from-primary to-purple-500 rounded-full transition-all duration-700 ease-out"
-              style={{
-                width: `${codeAnalysisData.overallScore ?? 0}%`,
-                transitionProperty: "width",
-              }}
-            />
-          </div>
-        </div>
+          <CardFooter className="flex-col items-start gap-4 p-6 pt-0">
+            <div className="w-full space-y-3">
+              <div className="flex justify-between text-sm font-medium">
+                <span className="text-muted-foreground">Overall Score</span>
+                <span className="text-primary">
+                  {codeAnalysisData.overallScore ?? "N/A"}
+                  <span className="text-muted-foreground">/100</span>
+                </span>
+              </div>
+              <div className="relative h-2.5 w-full overflow-hidden rounded-full bg-muted">
+                <div
+                  className="h-full bg-gradient-to-r from-primary to-purple-500 rounded-full transition-all duration-700 ease-out"
+                  style={{
+                    width: `${codeAnalysisData.overallScore ?? 0}%`,
+                    transitionProperty: "width",
+                  }}
+                />
+              </div>
+            </div>
 
-        <div className="text-muted-foreground bg-muted/40 p-4 rounded-lg w-full border">
-          <h3 className="font-medium mb-2 text-foreground">Feedback</h3>
-          <p className="whitespace-pre-wrap leading-relaxed">
-            {codeAnalysisData.feedback}
-          </p>
-        </div>
-      </CardFooter>
-    </Card>
+            <div className="text-muted-foreground bg-muted/40 p-4 rounded-lg w-full border">
+              <h3 className="font-medium mb-2 text-foreground">Feedback</h3>
+              <p className="whitespace-pre-wrap leading-relaxed">
+                {codeAnalysisData.feedback}
+              </p>
+            </div>
+          </CardFooter>
+        </Card>
+        <ScrollBar orientation="horizontal" />
+      </ScrollArea>
+    </PanelLayout>
   );
 };