Better run layout

src/app/run/components/RunTimer.tsx

@@ -18,9 +18,9 @@ export default function RunTimer({ runInfo }: { runInfo: LiveRun }) {
   }, [runInfo.start]);
 
   return (
-    <Card className="relative text-center overflow-hidden">
+    <Card className="relative text-center overflow-hidden h-full">
       <div className="absolute inset-0 bg-linear-to-b from-primary/5 to-transparent pointer-events-none" />
-      <CardContent className="relative">
+      <CardContent className="relative flex justify-center items-center h-full">
         <p className="timer-display text-primary text-4xl font-bold">{time}</p>
       </CardContent>
     </Card>

src/app/run/page.tsx

@@ -8,6 +8,7 @@ import { File } from "lucide-react";
 import Editor from "./components/Editor";
 import useAction from "@/hook/use-action";
 import { getLiveRun } from "@/modules/live-run/actions";
+import ProblemCard from "../problems/components/ProblemCard";
 
 export default function Run() {
   const [runInfo] = useAction(getLiveRun);
@@ -20,6 +21,21 @@ export default function Run() {
 
   return (
     <div className="h-svh px-20 pt-24 pb-12 flex gap-8">
+      <div className="h-full w-full flex flex-col gap-4">
+        <div className="w-full flex gap-5">
+          <div className="flex-1">
+            
+          </div>
+
+          <div className="flex-1">
+            <ProblemCard name="Idk" difficulty="hard" tags={[]} attempts={0} />
+          </div>
+
+          <div className="flex-1">
+            {runInfo && <RunTimer runInfo={runInfo} />}
+          </div>
+        </div>
+
         {/* Editor */}
         <Card className="flex-1 overflow-hidden">
           <CardContent className="flex h-full">
@@ -52,11 +68,10 @@ export default function Run() {
             </div>
           </CardContent>
         </Card>
+      </div>
 
       {/* Timer & Chat */}
-      <div className="flex flex-col gap-6 h-full w-sm">
+      <div className="h-full w-lg flex">
-        {runInfo && <RunTimer runInfo={runInfo} />}
-        {/* {runInfo && <ProblemCard {...runInfo.problem} />} */}
         <RunChat chatMessages={chatMessages} />
       </div>
     </div>