Edit margin/spacing changes for mobile

Author: leekahung

frontend/src/Chat.tsx

@@ -28,10 +28,10 @@ export default function Chat() {
       <div className="flex w-full items-center ">
         <div className="flex-1 transition-all duration-300">
           <div
-            className={`container relative h-[calc(100vh-4rem)] flex flex-col mx-auto p-6 bg-[#F4F4F2] rounded-lg shadow-[0_4px_6px_rgba(0,0,0,0.1)]
+            className={`container relative flex flex-col mx-auto p-6 bg-[#F4F4F2] rounded-lg shadow-[0_4px_6px_rgba(0,0,0,0.1)]
               ${
                 isOngoing
-                  ? "justify-between sm:h-[calc(100dvh-10rem)]"
+                  ? "justify-between h-[calc(100dvh-4rem)] max-h-[calc(100dvh-4rem)] sm:h-[calc(100dvh-10rem)]"
                   : "justify-center max-w-[600px]"
               }`}
           >

frontend/src/pages/Chat/components/MessageWindow.tsx

@@ -50,7 +50,7 @@ export default function MessageWindow({
           </div>
         ) : (
           <div
-            className={`max-h-[calc(100vh-15rem)] sm:max-h-[calc(100vh-20rem)] mx-auto max-w-[700px] ${
+            className={`max-h-[calc(100dvh-240px)] mx-auto max-w-[700px] ${
               isOngoing ? "overflow-y-scroll" : "overflow-y-none"
             }`}
             ref={messagesRef}