From 599d44b3416140aba7f0398ffa9a1ed6de0f2e3c Mon Sep 17 00:00:00 2001
From: cfngc4594 <cfngc4594@gmail.com>
Date: Mon, 24 Mar 2025 13:57:26 +0800
Subject: [PATCH] refactor(globals): migrate global styles to components and
 adjust layout

---
 .../problems/[id]/@problem/@description/page.tsx      |  2 +-
 .../(app)/problems/[id]/@problem/@solution/page.tsx   |  2 +-
 src/app/globals.css                                   | 11 -----------
 3 files changed, 2 insertions(+), 13 deletions(-)

diff --git a/src/app/(app)/problems/[id]/@problem/@description/page.tsx b/src/app/(app)/problems/[id]/@problem/@description/page.tsx
index 48e32ae..6268a86 100644
--- a/src/app/(app)/problems/[id]/@problem/@description/page.tsx
+++ b/src/app/(app)/problems/[id]/@problem/@description/page.tsx
@@ -17,7 +17,7 @@ export default function ProblemDescriptionPage() {
     <>
       <div className="flex-1">
         <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
-          <MdxPreview source={problem.description} />
+          <MdxPreview source={problem.description} className="box-border min-w-[200px] max-w-[980px] mx-auto p-4 md:p-6" />
           <ScrollBar orientation="horizontal" />
         </ScrollArea>
       </div>
diff --git a/src/app/(app)/problems/[id]/@problem/@solution/page.tsx b/src/app/(app)/problems/[id]/@problem/@solution/page.tsx
index 25fef36..cd50319 100644
--- a/src/app/(app)/problems/[id]/@problem/@solution/page.tsx
+++ b/src/app/(app)/problems/[id]/@problem/@solution/page.tsx
@@ -12,7 +12,7 @@ export default function ProblemSolutionPage() {
     <>
       <div className="flex-1">
         <ScrollArea className="[&>[data-radix-scroll-area-viewport]]:max-h-[calc(100vh-130px)]">
-          <MdxPreview source={problem.solution} />
+          <MdxPreview source={problem.solution} className="box-border min-w-[200px] max-w-[980px] mx-auto p-4 md:p-6" />
           <ScrollBar orientation="horizontal" />
         </ScrollArea>
       </div>
diff --git a/src/app/globals.css b/src/app/globals.css
index 6fa2133..30535d3 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -90,11 +90,6 @@
 }
 
 .markdown-body {
-  box-sizing: border-box;
-  min-width: 200px;
-  max-width: 980px;
-  margin: 0 auto;
-  padding: 45px;
   font-family: "Fira Code";
   font-weight: 500;
   font-size: 14px;
@@ -109,12 +104,6 @@
   line-height: 20px;
 }
 
-@media (max-width: 768px) {
-  .markdown-body {
-    padding: 15px;
-  }
-}
-
 code[data-theme*=" "],
 code[data-theme*=" "] span {
   color: var(--shiki-light);