From 002f1ba681f6ab32543addf4fc2a2b2d60dfb4f5 Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Fri, 29 May 2026 14:26:32 +0800
Subject: [PATCH] refactor(analysis): replace feedback display with MdxPreview
 component and adjust layout in detail panel

---
 src/features/problems/analysis/components/card.tsx  | 13 +++++++------
 src/features/problems/detail/components/content.tsx |  2 +-
 src/features/problems/detail/components/panel.tsx   | 10 ++++++----
 3 files changed, 14 insertions(+), 11 deletions(-)

diff --git a/src/features/problems/analysis/components/card.tsx b/src/features/problems/analysis/components/card.tsx
index ba53dc3..e521e3b 100644
--- a/src/features/problems/analysis/components/card.tsx
+++ b/src/features/problems/analysis/components/card.tsx
@@ -20,6 +20,8 @@ import {
 import type { AnalysisStatus, CodeAnalysis } from "@/generated/client";
 import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
 import { useTranslations } from "next-intl";
+import MdxPreview from "@/components/mdx-preview";
+import { MdxComponents } from "@/components/content/mdx-components";
 
 interface AnalysisCardProps {
   submissionId: string;
@@ -192,12 +194,11 @@ export const AnalysisCard = ({ submissionId }: AnalysisCardProps) => {
           </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">{t("Feedback")}</h3>
-          <p className="whitespace-pre-wrap leading-relaxed">
-            {analysis.feedback}
-          </p>
-        </div>
+        <MdxPreview
+          source={analysis.feedback ?? t("NotAvailable")}
+          components={MdxComponents}
+          className="w-full"
+        />
       </CardFooter>
     </Card>
   );
diff --git a/src/features/problems/detail/components/content.tsx b/src/features/problems/detail/components/content.tsx
index 0176b54..6dc3c64 100644
--- a/src/features/problems/detail/components/content.tsx
+++ b/src/features/problems/detail/components/content.tsx
@@ -9,7 +9,7 @@ interface DetailContentProps {
 
 export const DetailContent = ({ submissionId }: DetailContentProps) => {
   return (
-    <ScrollArea className="h-full">
+    <ScrollArea className="min-h-0 flex-1">
       <DetailTable submissionId={submissionId} />
       <AnalysisContent submissionId={submissionId} />
       <ScrollBar orientation="horizontal" />
diff --git a/src/features/problems/detail/components/panel.tsx b/src/features/problems/detail/components/panel.tsx
index 573e9dc..29eb219 100644
--- a/src/features/problems/detail/components/panel.tsx
+++ b/src/features/problems/detail/components/panel.tsx
@@ -21,10 +21,12 @@ export const DetailPanel = ({ submissionId }: DetailPanelProps) => {
 
   return (
     <PanelLayout isScroll={false}>
-      <DetailHeader />
-      <Suspense fallback={<DetailContentSkeleton />}>
-        <DetailContent submissionId={submissionId} />
-      </Suspense>
+      <div className="flex h-full min-h-0 flex-col">
+        <DetailHeader />
+        <Suspense fallback={<DetailContentSkeleton />}>
+          <DetailContent submissionId={submissionId} />
+        </Suspense>
+      </div>
     </PanelLayout>
   );
 };