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,43 +21,57 @@ export default function Run() {
 
   return (
     <div className="h-svh px-20 pt-24 pb-12 flex gap-8">
-      {/* Editor */}
-      <Card className="flex-1 overflow-hidden">
-        <CardContent className="flex h-full">
-          {/* File tree */}
-          <div className="w-2xs border-r border-border">
-            <FileTree
-              tree={{
-                type: "directory",
-                uri: "my-app",
-                children: [
-                  { type: "file", uri: "myfile.js" },
-                  {
-                    type: "directory",
-                    uri: "my-app",
-                    children: [{ type: "file", uri: "myfile.js" }],
-                  },
-                ],
-              }}
-            />
+      <div className="h-full w-full flex flex-col gap-4">
+        <div className="w-full flex gap-5">
+          <div className="flex-1">
+            
           </div>
 
-          {/* Code */}
-          <div className="flex-1 pl-5 flex flex-col">
-            <header className="text-sm font-medium text-muted-foreground flex items-center gap-1">
-              <File size={16} /> myfile.js
-            </header>
-            <div className="flex-1 pt-3 pb-5 h-full">
-              <Editor />
-            </div>
+          <div className="flex-1">
+            <ProblemCard name="Idk" difficulty="hard" tags={[]} attempts={0} />
           </div>
-        </CardContent>
-      </Card>
+
+          <div className="flex-1">
+            {runInfo && <RunTimer runInfo={runInfo} />}
+          </div>
+        </div>
+
+        {/* Editor */}
+        <Card className="flex-1 overflow-hidden">
+          <CardContent className="flex h-full">
+            {/* File tree */}
+            <div className="w-2xs border-r border-border">
+              <FileTree
+                tree={{
+                  type: "directory",
+                  uri: "my-app",
+                  children: [
+                    { type: "file", uri: "myfile.js" },
+                    {
+                      type: "directory",
+                      uri: "my-app",
+                      children: [{ type: "file", uri: "myfile.js" }],
+                    },
+                  ],
+                }}
+              />
+            </div>
+
+            {/* Code */}
+            <div className="flex-1 pl-5 flex flex-col">
+              <header className="text-sm font-medium text-muted-foreground flex items-center gap-1">
+                <File size={16} /> myfile.js
+              </header>
+              <div className="flex-1 pt-3 pb-5 h-full">
+                <Editor />
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
 
       {/* Timer & Chat */}
-      <div className="flex flex-col gap-6 h-full w-sm">
-        {runInfo && <RunTimer runInfo={runInfo} />}
-        {/* {runInfo && <ProblemCard {...runInfo.problem} />} */}
+      <div className="h-full w-lg flex">
         <RunChat chatMessages={chatMessages} />
       </div>
     </div>