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>

src/components/app/ProfileCard.tsx

@@ -10,25 +10,23 @@ export default function ProfileCard({
     <Card className="relative w-full h-full overflow-hidden">
       <div className="absolute inset-0 bg-linear-to-r from-primary/10 via-transparent to-transparent" />
 
-      <CardContent className="relative flex flex-col md:flex-row gap-6 w-full h-full">
+      <CardContent className="relative flex flex-row gap-6 w-full h-full">
         {/* Avatar */}
-        <div className="relative shrink-0 w-full md:w-1/4 h-1/3 md:h-full flex items-center justify-center">
+        <div className="relative shrink-0 w-1/4 h-full flex items-center justify-center">
           <img
             src="http://github.com/selimaj-dev.png"
             alt="Img"
             className="rounded-2xl aspect-square max-h-full w-auto object-contain"
           />
 
-          <div className="absolute -bottom-2 -right-2 w-12 h-12 md:w-8 md:h-8 rounded-lg rank-gold flex items-center justify-center text-sm md:text-xs font-bold glow-gold">
+          <div className="absolute -bottom-2 -right-2 w-8 h-8 rounded-lg rank-gold flex items-center justify-center text-xs font-bold glow-gold">
             #{user.rank}
           </div>
         </div>
 
         {/* User Info */}
         <div className="flex-1 flex flex-col justify-center w-full">
-          <h1 className="text-4xl md:text-3xl font-bold mb-2">
-            {user.username}
-          </h1>
+          <h1 className="text-3xl font-bold mb-2">{user.username}</h1>
           <Badge>World Record Holder</Badge>
         </div>
       </CardContent>