style(problem): adjust problem layout styles

src/app/(app)/problems/[id]/@Code/layout.tsx

@@ -9,8 +9,8 @@ interface CodeLayoutProps {
 
 export default function CodeLayout({ children }: CodeLayoutProps) {
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
-      <WorkspaceEditorHeader className="border-b border-x border-muted bg-background" />
+      <WorkspaceEditorHeader />
       <Suspense fallback={<Loading />}>
         {children}
       </Suspense>

src/app/(app)/problems/[id]/@Code/page.tsx

@@ -2,7 +2,7 @@ import { ProblemEditor } from "@/components/problem-editor";
 
 export default function CodePage() {
   return (
-    <div className="relative flex-1 border-x border-muted">
+    <div className="relative flex-1">
       <div className="absolute w-full h-full">
         <ProblemEditor />
       </div>

src/app/(app)/problems/[id]/@Description/layout.tsx

@@ -7,7 +7,7 @@ interface DescriptionLayoutProps {
 
 export default function DescriptionLayout({ children }: DescriptionLayoutProps) {
   return (
-    <div className="h-full flex flex-col">
+    <div className="h-full flex flex-col border border-t-0 border-muted rounded-b-3xl bg-background">
       <Suspense fallback={<Loading />}>
         {children}
       </Suspense>

src/app/(app)/problems/[id]/@Description/page.tsx

@@ -29,7 +29,7 @@ export default async function DescriptionPage({ params }: DescriptionPageProps)
 
   return (
     <>
-      <div className="relative flex-1 border-x border-muted">
+      <div className="relative flex-1">
         <div className="absolute h-full w-full">
           <ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
             <MdxPreview source={problem.description} className="p-4 md:p-6" />

src/app/(app)/problems/[id]/@Details/layout.tsx

@@ -1,15 +1,15 @@
 import { Suspense } from "react";
+import { getUserLocale } from "@/i18n/locale";
 import { Loading } from "@/components/loading";
+import DetailsPage from "@/app/(app)/problems/[id]/@Details/page";
 
-interface DetailsLayoutProps {
+export default async function DetailsLayout() {
-  children: React.ReactNode;
+  const locale = await getUserLocale();
-}
 
-export default async function DetailsLayout({ children }: DetailsLayoutProps) {
   return (
     <div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
       <Suspense fallback={<Loading />}>
-        {children}
+        <DetailsPage locale={locale} />;
       </Suspense>
     </div>
   );

src/app/(app)/problems/[id]/@Solutions/layout.tsx

@@ -7,7 +7,7 @@ interface SolutionsLayoutProps {
 
 export default async function SolutionsLayout({ children }: SolutionsLayoutProps) {
   return (
-    <div className="flex flex-col h-full">
+    <div className="flex flex-col h-full border border-t-0 border-muted rounded-b-3xl bg-background">
       <Suspense fallback={<Loading />}>
         {children}
       </Suspense>

src/app/(app)/problems/[id]/@Solutions/page.tsx

@@ -29,7 +29,7 @@ export default async function SolutionsPage({ params }: SolutionsPageProps) {
 
   return (
     <>
-      <div className="relative flex-1 border-x border-muted">
+      <div className="relative flex-1">
         <div className="absolute h-full w-full">
           <ScrollArea className="h-full [&>[data-radix-scroll-area-viewport]>div:min-w-0 [&>[data-radix-scroll-area-viewport]>div]:!block bg-background">
             <MdxPreview source={problem.solution} className="p-4 md:p-6" />