Merge pull request #192 from CS3219-AY2425S1/fix/bug/collab-service-entire-page-scroll-down

Fix: Entire collab page scroll down bug

Author: wr1159

frontend/components/collab/chat.tsx

@@ -202,7 +202,7 @@ export default function Chat({ roomId }: { roomId: string }) {
   }
 
   return (
-    <Card className="flex flex-col">
+    <Card className="flex flex-col h-full">
       <CardHeader>
         <CardTitle className="flex justify-between items-center">
           Chat

frontend/components/collab/collab-room.tsx

@@ -8,7 +8,7 @@ import Link from "next/link";
 
 export default function CollabRoom({ roomId }: { roomId: string }) {
   return (
-    <div className="h-full flex flex-col mx-4 p-4">
+    <div className="h-screen flex flex-col mx-4 p-4 overflow-hidden">
       <header className="flex justify-between border-b">
         <h1 className="text-2xl font-bold mb-4">Collab Room {roomId}</h1>
         <Link href="/app/history">
@@ -18,10 +18,12 @@ export default function CollabRoom({ roomId }: { roomId: string }) {
           </Button>
         </Link>
       </header>
-      <div className="flex flex-1">
-        <div className="w-2/5 p-4 flex flex-col space-y-4">
+      <div className="flex flex-1 overflow-hidden">
+        <div className="w-2/5 p-4 flex flex-col space-y-4 overflow-hidden">
           <QuestionDisplay roomId={roomId} />
-          <Chat roomId={roomId} />
+          <div className="flex-1 overflow-hidden">
+            <Chat roomId={roomId} />
+          </div>
         </div>
         <CodeEditor roomId={roomId} />
       </div>