feat(panel): add horizontal scrollbar to edit panels

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

@@ -6,8 +6,8 @@ import { Language } from "@/generated/client";
 import { Button } from "@/components/ui/button";
 import React, { useEffect, useState } from "react";
 import { CoreEditor } from "@/components/core-editor";
-import { ScrollArea } from "@/components/ui/scroll-area";
 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";
@@ -112,6 +112,7 @@ export default function EditCodePanel({ problemId }: EditCodePanelProps) {
             </div>
           </CardContent>
         </Card>
+        <ScrollBar orientation="horizontal" />
       </ScrollArea>
     </PanelLayout>
   );

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

@@ -13,10 +13,10 @@ import MdxPreview from "@/components/mdx-preview";
 import React, { useEffect, useState } from "react";
 import { Accordion } from "@/components/ui/accordion";
 import { CoreEditor } from "@/components/core-editor";
-import { ScrollArea } from "@/components/ui/scroll-area";
 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";
 
@@ -211,6 +211,7 @@ export default function EditDescriptionPanel({
             </div>
           </CardContent>
         </Card>
+        <ScrollBar orientation="horizontal" />
       </ScrollArea>
     </PanelLayout>
   );

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

@@ -6,8 +6,8 @@ import { Input } from "@/components/ui/input";
 import { Button } from "@/components/ui/button";
 import { Difficulty } from "@/generated/client";
 import React, { useState, useEffect } from "react";
-import { ScrollArea } from "@/components/ui/scroll-area";
 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";
@@ -163,6 +163,7 @@ export default function EditDetailPanel({ problemId }: { problemId: string }) {
             </div>
           </CardContent>
         </Card>
+        <ScrollBar orientation="horizontal" />
       </ScrollArea>
     </PanelLayout>
   );

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

@@ -9,10 +9,10 @@ import MdxPreview from "@/components/mdx-preview";
 import React, { useEffect, useState } from "react";
 import { Accordion } from "@/components/ui/accordion";
 import { CoreEditor } from "@/components/core-editor";
-import { ScrollArea } from "@/components/ui/scroll-area";
 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";
@@ -204,6 +204,7 @@ export default function EditSolutionPanel({
             </Button>
           </CardContent>
         </Card>
+        <ScrollBar orientation="horizontal" />
       </ScrollArea>
     </PanelLayout>
   );

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

@@ -10,9 +10,9 @@ import {
 } from "@/components/creater/problem-maintain";
 import { Button } from "@/components/ui/button";
 import React, { useState, useEffect } from "react";
-import { ScrollArea } from "@/components/ui/scroll-area";
 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";
 
@@ -272,6 +272,7 @@ export default function EditTestcasePanel({
             ))}
           </CardContent>
         </Card>
+        <ScrollBar orientation="horizontal" />
       </ScrollArea>
     </PanelLayout>
   );