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 onClick={() => handleAddInput(idx)}>添加输入</Button>
-                      添加输入
-                    </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(
+                          handleInputChange(idx, iIdx, "value", e.target.value)
-                              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/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 (
+  return <MdxRenderer source={description} className="p-4 md:p-6" />;
-    <ScrollArea className="h-full">
-      <MdxRenderer source={description} className="p-4 md:p-6" />
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  );
 };
 
 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 (
+  return <MdxRenderer source={solution} className="p-4 md:p-6" />;
-    <ScrollArea className="h-full">
-      <MdxRenderer source={solution} className="p-4 md:p-6" />
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  );
 };
 
 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 (
+  return userId ? (
-    <ScrollArea className="h-full px-3">
+    <div className="px-3">
-      {userId ? <SubmissionTable problemId={problemId} /> : <LoginPromptCard />}
+      <SubmissionTable problemId={problemId} />
-      <ScrollBar orientation="horizontal" />
+    </div>
-    </ScrollArea>
+  ) : (
+    <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 (
+  return <TestcaseTable problemId={problemId} />;
-    <ScrollArea className="h-full">
-      <TestcaseTable problemId={problemId} />
-      <ScrollBar orientation="horizontal" />
-    </ScrollArea>
-  );
 };
 
 export const TestcaseContentSkeleton = () => {