feat(panel-layout): add scrollable content support with isScroll prop

- Add ScrollArea and ScrollBar components from ui/scroll-area
- Introduce optional isScroll prop (defaults to true) to control scrolling
- Maintain backward compatibility with existing usage

src/components/creater/edit-code-panel.tsx

@@ -7,7 +7,6 @@ import { Button } from "@/components/ui/button";
 import React, { useEffect, useState } from "react";
 import { CoreEditor } from "@/components/core-editor";
 import { getProblemData } from "@/app/actions/getProblem";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 import { updateProblemTemplate } from "@/components/creater/problem-maintain";
@@ -70,7 +69,6 @@ export default function EditCodePanel({ problemId }: EditCodePanelProps) {
 
   return (
     <PanelLayout>
-      <ScrollArea className="h-full">
       <Card className="w-full rounded-none border-none bg-background">
         <CardHeader className="px-6 py-4">
           <div className="flex items-center justify-between">
@@ -112,8 +110,6 @@ export default function EditCodePanel({ problemId }: EditCodePanelProps) {
           </div>
         </CardContent>
       </Card>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
     </PanelLayout>
   );
 }

src/components/creater/edit-description-panel.tsx

@@ -16,7 +16,6 @@ import { CoreEditor } from "@/components/core-editor";
 import { getProblemData } from "@/app/actions/getProblem";
 import { VideoEmbed } from "@/components/content/video-embed";
 import { getProblemLocales } from "@/app/actions/getProblemLocales";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 
@@ -105,7 +104,6 @@ export default function EditDescriptionPanel({
 
   return (
     <PanelLayout>
-      <ScrollArea className="h-full">
       <Card className="w-full rounded-none border-none bg-background">
         <CardHeader>
           <CardTitle>题目描述</CardTitle>
@@ -211,8 +209,6 @@ export default function EditDescriptionPanel({
           </div>
         </CardContent>
       </Card>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
     </PanelLayout>
   );
 }

src/components/creater/edit-detail-panel.tsx

@@ -7,7 +7,6 @@ import { Button } from "@/components/ui/button";
 import { Difficulty } from "@/generated/client";
 import React, { useState, useEffect } from "react";
 import { getProblemData } from "@/app/actions/getProblem";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 import { updateProblemDetail } from "@/components/creater/problem-maintain";
@@ -80,7 +79,6 @@ export default function EditDetailPanel({ problemId }: { problemId: string }) {
 
   return (
     <PanelLayout>
-      <ScrollArea className="h-full">
       <Card className="w-full rounded-none border-none bg-background">
         <CardHeader className="px-6 py-4">
           <div className="flex items-center justify-between">
@@ -163,8 +161,6 @@ export default function EditDetailPanel({ problemId }: { problemId: string }) {
           </div>
         </CardContent>
       </Card>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
     </PanelLayout>
   );
 }

src/components/creater/edit-solution-panel.tsx

@@ -12,7 +12,6 @@ import { CoreEditor } from "@/components/core-editor";
 import { getProblemData } from "@/app/actions/getProblem";
 import { VideoEmbed } from "@/components/content/video-embed";
 import { getProblemLocales } from "@/app/actions/getProblemLocales";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 import { updateProblemSolution } from "@/components/creater/problem-maintain";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
@@ -96,7 +95,6 @@ export default function EditSolutionPanel({
 
   return (
     <PanelLayout>
-      <ScrollArea className="h-full">
       <Card className="w-full rounded-none border-none bg-background">
         <CardHeader>
           <CardTitle>题目解析</CardTitle>
@@ -204,8 +202,6 @@ export default function EditSolutionPanel({
           </Button>
         </CardContent>
       </Card>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
     </PanelLayout>
   );
 }

src/components/creater/edit-testcase-panel.tsx

@@ -12,7 +12,6 @@ import { Button } from "@/components/ui/button";
 import React, { useState, useEffect } from "react";
 import { getProblemData } from "@/app/actions/getProblem";
 import { generateAITestcase } from "@/app/actions/ai-testcase";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { Card, CardContent, CardHeader } from "@/components/ui/card";
 import { PanelLayout } from "@/features/problems/layouts/panel-layout";
 
@@ -185,7 +184,6 @@ export default function EditTestcasePanel({
 
   return (
     <PanelLayout>
-      <ScrollArea className="h-full">
       <Card className="w-full rounded-none border-none bg-background">
         <CardHeader className="px-6 py-4">
           <div className="flex items-center justify-between">
@@ -226,9 +224,7 @@ export default function EditTestcasePanel({
               <div className="space-y-2">
                 <div className="flex justify-between items-center">
                   <Label>输入参数</Label>
-                    <Button onClick={() => handleAddInput(idx)}>
-                      添加输入
-                    </Button>
+                  <Button onClick={() => handleAddInput(idx)}>添加输入</Button>
                 </div>
                 {tc.inputs.map((inp, iIdx) => (
                   <div key={iIdx} className="grid grid-cols-2 gap-4">
@@ -247,12 +243,7 @@ export default function EditTestcasePanel({
                       <Input
                         value={inp.value}
                         onChange={(e) =>
-                            handleInputChange(
-                              idx,
-                              iIdx,
-                              "value",
-                              e.target.value
-                            )
+                          handleInputChange(idx, iIdx, "value", e.target.value)
                         }
                         placeholder="参数值"
                       />
@@ -272,8 +263,6 @@ export default function EditTestcasePanel({
           ))}
         </CardContent>
       </Card>
-        <ScrollBar orientation="horizontal" />
-      </ScrollArea>
     </PanelLayout>
   );
 }

src/features/problems/analysis/components/panel.tsx

@@ -1,123 +1,14 @@
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardHeader,
-  CardTitle,
-  CardFooter,
-} from "@/components/ui/card";
-import prisma from "@/lib/prisma";
-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.";
+import { AnalysisContent } from "@/features/problems/analysis/components/content";
 
 interface AnalysisPanelProps {
   submissionId: string | undefined;
 }
 
-export const AnalysisPanel = async ({ submissionId }: AnalysisPanelProps) => {
-  if (!submissionId) {
-    return (
-      <div className="p-4 text-center text-muted-foreground">
-        No submission ID provided.
-      </div>
-    );
-  }
-
-  const codeAnalysisData = await prisma.codeAnalysis.findUnique({
-    where: {
-      submissionId: submissionId,
-    },
-  });
-
-  if (!codeAnalysisData) {
-    return (
-      <div className="p-4 text-center text-muted-foreground">
-        No analysis data found for this submission.
-      </div>
-    );
-  }
-
-  // Transform the data into a format suitable for the RadarChart
-  const chartData: ChartDataPoint[] = [
-    {
-      kind: "overall",
-      score: codeAnalysisData.overallScore ?? 0,
-      fullMark: 100,
-    },
-    {
-      kind: "style",
-      score: codeAnalysisData.styleScore ?? 0,
-      fullMark: 100,
-    },
-    {
-      kind: "readability",
-      score: codeAnalysisData.readabilityScore ?? 0,
-      fullMark: 100,
-    },
-    {
-      kind: "efficiency",
-      score: codeAnalysisData.efficiencyScore ?? 0,
-      fullMark: 100,
-    },
-    {
-      kind: "correctness",
-      score: codeAnalysisData.correctnessScore ?? 0,
-      fullMark: 100,
-    },
-  ];
-
+export const AnalysisPanel = ({ submissionId }: AnalysisPanelProps) => {
   return (
     <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>
-
-            <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>
+      <AnalysisContent submissionId={submissionId} />
     </PanelLayout>
   );
 };

src/features/problems/bot/components/panel.tsx

@@ -11,7 +11,7 @@ interface BotPanelProps {
 
 export const BotPanel = ({ problemId }: BotPanelProps) => {
   return (
-    <PanelLayout>
+    <PanelLayout isScroll={false}>
       <Suspense fallback={<BotContentSkeleton />}>
         <BotContent problemId={problemId} />
       </Suspense>

src/features/problems/code/components/panel.tsx

@@ -13,7 +13,7 @@ interface CodePanelProps {
 
 export const CodePanel = ({ problemId }: CodePanelProps) => {
   return (
-    <PanelLayout>
+    <PanelLayout isScroll={false}>
       <div className="h-full flex flex-col">
         <CodeToolbar className="border-b" />
         <Suspense fallback={<CodeContentSkeleton />}>

src/features/problems/description/components/content.tsx

@@ -2,7 +2,6 @@ import prisma from "@/lib/prisma";
 import { getLocale } from "next-intl/server";
 import { Skeleton } from "@/components/ui/skeleton";
 import { MdxRenderer } from "@/components/content/mdx-renderer";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import type { Locale, ProblemLocalization } from "@/generated/client";
 
 const getLocalizedDescription = (
@@ -40,12 +39,7 @@ export const DescriptionContent = async ({
 
   const description = getLocalizedDescription(descriptions, locale as Locale);
 
-  return (
-    <ScrollArea className="h-full">
-      <MdxRenderer source={description} className="p-4 md:p-6" />
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  );
+  return <MdxRenderer source={description} className="p-4 md:p-6" />;
 };
 
 export const DescriptionContentSkeleton = () => {

src/features/problems/detail/components/panel.tsx

@@ -16,7 +16,7 @@ export const DetailPanel = ({ submissionId }: DetailPanelProps) => {
   }
 
   return (
-    <PanelLayout>
+    <PanelLayout isScroll={false}>
       <DetailHeader />
       <Suspense fallback={<DetailContentSkeleton />}>
         <DetailContent submissionId={submissionId} />

src/features/problems/layouts/panel-layout.tsx

@@ -1,12 +1,27 @@
+import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
+
 interface PanelLayoutProps {
+  isScroll?: boolean;
   children: React.ReactNode;
 }
 
-export const PanelLayout = ({ children }: PanelLayoutProps) => {
+export const PanelLayout = ({
+  isScroll = true,
+  children,
+}: PanelLayoutProps) => {
   return (
     <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-lg bg-background overflow-hidden">
       <div className="relative flex-1">
-        <div className="absolute h-full w-full">{children}</div>
+        <div className="absolute h-full w-full">
+          {isScroll ? (
+            <ScrollArea className="h-full">
+              {children}
+              <ScrollBar orientation="horizontal" />
+            </ScrollArea>
+          ) : (
+            children
+          )}
+        </div>
       </div>
     </div>
   );

src/features/problems/solution/components/content.tsx

@@ -2,7 +2,6 @@ import prisma from "@/lib/prisma";
 import { getLocale } from "next-intl/server";
 import { Skeleton } from "@/components/ui/skeleton";
 import { MdxRenderer } from "@/components/content/mdx-renderer";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import type { Locale, ProblemLocalization } from "@/generated/client";
 
 const getLocalizedSolution = (
@@ -38,12 +37,7 @@ export const SolutionContent = async ({ problemId }: SolutionContentProps) => {
 
   const solution = getLocalizedSolution(solutions, locale as Locale);
 
-  return (
-    <ScrollArea className="h-full">
-      <MdxRenderer source={solution} className="p-4 md:p-6" />
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  );
+  return <MdxRenderer source={solution} className="p-4 md:p-6" />;
 };
 
 export const SolutionContentSkeleton = () => {

src/features/problems/submission/components/content.tsx

@@ -3,7 +3,6 @@ import { CodeXmlIcon } from "lucide-react";
 import { useTranslations } from "next-intl";
 import { Button } from "@/components/ui/button";
 import { Skeleton } from "@/components/ui/skeleton";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 import { SubmissionTable } from "@/features/problems/submission/components/table";
 
 interface SubmissionContentProps {
@@ -45,11 +44,12 @@ export const SubmissionContent = async ({
   const session = await auth();
   const userId = session?.user?.id;
 
-  return (
-    <ScrollArea className="h-full px-3">
-      {userId ? <SubmissionTable problemId={problemId} /> : <LoginPromptCard />}
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
+  return userId ? (
+    <div className="px-3">
+      <SubmissionTable problemId={problemId} />
+    </div>
+  ) : (
+    <LoginPromptCard />
   );
 };
 

src/features/problems/testcase/content.tsx

@@ -1,18 +1,12 @@
 import { Skeleton } from "@/components/ui/skeleton";
 import { TestcaseTable } from "@/features/problems/testcase/table";
-import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
 
 interface TestcaseContentProps {
   problemId: string;
 }
 
 export const TestcaseContent = ({ problemId }: TestcaseContentProps) => {
-  return (
-    <ScrollArea className="h-full">
-      <TestcaseTable problemId={problemId} />
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  );
+  return <TestcaseTable problemId={problemId} />;
 };
 
 export const TestcaseContentSkeleton = () => {