Clean up styling by using flex

Author: LemonDrew

frontend/src/app/collab/page.tsx

@@ -11,17 +11,16 @@ export default function CollabPage() {
       <div className="flex flex-1 w-full bg-stone-800 ">
 
         <div className="flex-1">
-          <QuestionComponent/>
+          <QuestionComponent />
         </div>
-        
-        <div className="flex-[2] h-full">
-          <CodingComponent/>
+
+        <div className="flex-[2]">
+          <CodingComponent />
         </div>
 
         <div className="flex-1 p-5">
-          <ChatComponent/>
+          <ChatComponent />
         </div>
-
       </div>
     </main>
   );

frontend/src/app/components/collab/ChatComponent.tsx

@@ -3,22 +3,18 @@ import { Input } from "@/components/ui/input";
 import { ChevronRightIcon } from "lucide-react";
 
 export default function ChatComponent() {
+  const chatMessages = ["HELLO", "HOW ARE YOU?"];
 
-    const chatMessages = ["HELLO", "HOW ARE YOU?"]
+  return (
+    <div className="flex flex-col h-full bg-stone-900 p-10">
+      <div className="flex bg-stone-500 h-full mb-5 rounded-lg"></div>
 
-    return (
-        <div className="flex flex-col h-full bg-stone-900 p-10">
-
-            <div className="flex bg-stone-500 h-full mb-5 rounded-lg">
-
-            </div>
-
-            <div className="flex w-full mt-auto gap-2">
-                <Input className="bg-white" />
-                <Button variant="secondary" size="icon" className="size-9">
-                    <ChevronRightIcon/>
-                </Button>
-            </div>
-        </div>
-    );
+      <div className="flex w-full mt-auto gap-2">
+        <Input className="bg-white" />
+        <Button variant="secondary" size="icon" className="size-9">
+          <ChevronRightIcon />
+        </Button>
+      </div>
+    </div>
+  );
 }

frontend/src/app/components/collab/CodingComponent.tsx

@@ -23,7 +23,7 @@ export default function CodingComponent() {
   }
 
   return (
-    <div className="h-full  mt-10">
+    <div className="mt-5">
       <div className="mb-4">
         <DropdownMenu>
           <DropdownMenuTrigger asChild className="flex justify-between">

frontend/src/app/components/collab/QuestionComponent.tsx

@@ -1,3 +1,19 @@
 export default function QuestionComponent() {
-  return <div>Helo</div>;
+  return (
+  <div>
+
+    {/* Question Description */}
+    <div>
+
+    </div>
+
+    {/* Examples Section */}
+    <div className="bg-stone-900">
+
+    </div>
+
+    {/* Constraints Section */}
+
+  </div>
+  );
 }

frontend/src/app/components/collab/SessionHeader.tsx

@@ -1,6 +1,6 @@
 export default function SessionHeader() {
   return (
-    <header className="bg-stone-800 w-full h-[5%] text-white border-b-2 border-stone-700">
+    <header className="bg-stone-800 w-full h-15 text-white border-b-2 border-stone-700">
       Session Header
     </header>
   );