Mobile friendly UI

src/app/run/page.tsx

@@ -21,9 +21,20 @@ export default function Run() {
   ];
 
   return (
-    <div className="h-svh px-20 pt-24 pb-12 flex gap-8">
+    <div
+      className="
+        h-svh
+        px-4 sm:px-8 lg:px-20
+        pt-20 sm:pt-24
+        pb-6 sm:pb-12
+        flex flex-col lg:flex-row
+        gap-6 lg:gap-8
+      "
+    >
+      {/* Main column */}
       <div className="h-full w-full flex flex-col gap-4">
-        <div className="w-full flex gap-5">
+        {/* Top cards */}
+        <div className="w-full flex flex-col md:flex-row gap-4 md:gap-5">
           <div className="flex-1 animate-fade-in opacity-0">
             <ProfileCard user={{ username: "selimaj", rank: 1 }} />
           </div>
@@ -44,10 +55,10 @@ export default function Run() {
         </div>
 
         {/* Editor */}
-        <Card className="flex-1 overflow-hidden">
+        <Card className="flex-1 h-svh overflow-hidden">
           <CardContent className="flex h-full">
-            {/* File tree */}
-            <div className="w-2xs border-r border-border">
+            {/* File tree – hide on small screens */}
+            <div className="hidden md:block w-2xs border-r border-border">
               <FileTree
                 tree={{
                   type: "directory",
@@ -65,11 +76,11 @@ export default function Run() {
             </div>
 
             {/* Code */}
-            <div className="flex-1 pl-5 flex flex-col">
+            <div className="flex-1 pl-0 md: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">
+              <div className="flex-1 pt-3 pb-4 md:pb-5 h-full">
                 <Editor />
               </div>
             </div>
@@ -78,7 +89,7 @@ export default function Run() {
       </div>
 
       {/* Timer & Chat */}
-      <div className="h-full w-lg flex">
+      <div className="flex lg:w-lg min-h-[60vh]">
         <RunChat chatMessages={chatMessages} />
       </div>
     </div>