UPDATE: Refactored ChatPanel and VideoPlayer layout for improved responsiveness and user experience

frontend/src/components/Video/ChatPanel.tsx

@@ -123,7 +123,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
       <ToggleButton
         onClick={toggleChat}
         toggled={isChatVisible}
-        extraClasses="z-5"
+        extraClasses="cursor-pointer"
       >
         {isChatVisible ? "Hide Chat" : "Show Chat"}
       </ToggleButton>
@@ -139,11 +139,8 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
             {messages.map((msg, index) => (
               <div
                 key={index}
-                className="grid grid-cols-[8%_minmax(15%,_100px)_1fr] items-center bg-gray-700 rounded p-2 text-white"
+                className="grid grid-cols-[minmax(15%,_100px)_1fr] group h-fit items-center bg-gray-700 rounded p-2 text-white"
               >
-                <span className="text-gray-400 text-sm">
-                  {new Date(msg.time_sent).toLocaleTimeString()}
-                </span>
                 <span
                   className={`font-bold ${
                     msg.chatter_username === username
@@ -154,13 +151,16 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
                   {" "}
                   {msg.chatter_username}:{" "}
                 </span>
-                <span>{msg.message}</span>
+                <span className="text-center" >{msg.message}</span>
+                <span className="text-gray-400 text-sm scale-0 group-hover:scale-100 h-[0px] group-hover:h-[10px] transition-all delay-1000 group-hover:delay-200">
+                  {new Date(msg.time_sent).toLocaleTimeString()}
+                </span>
               </div>
             ))}
           </div>
 
           <div className="flex justify-center gap-2">
-            {isLoggedIn && (
+            {isLoggedIn ? (
               <>
                 <Input
                   type="text"
@@ -181,13 +181,13 @@ const ChatPanel: React.FC<ChatPanelProps> = ({ streamId }) => {
                   Send
                 </button>
               </>
-            )}
+            ) : (
-
-            {!isLoggedIn && (
               <Button
-                extraClasses="absolute top-[20px] left-[20px] text-[1rem] flex items-center flex-nowrap z-[999]"
+                extraClasses="text-[1rem] flex items-center flex-nowrap z-[999]"
                 onClick={() => setShowAuthModal(true)}
-              ></Button>
+                >
+                Login to Chat
+              </Button>
             )}
           </div>
           {showAuthModal && (

frontend/src/components/Video/VideoPlayer.tsx

@@ -53,7 +53,7 @@ const VideoPlayer: React.FC<VideoPlayerProps> = ({ streamId }) => {
     <div
       id="video-container"
       className="h-full flex items-center bg-gray-900 rounded-lg"
-      style={{ gridArea: "2 / 1 / 3 / 2" }}
+      style={{ gridArea: "1 / 1 / 2 / 2" }}
     >
       <div ref={videoRef} id="video-player" className="w-full" />
     </div>

frontend/src/pages/VideoPage.tsx

@@ -77,18 +77,19 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamId }) => {
     <SocketProvider>
       <div id="videoPage" className="w-full">
         <Navbar />
-        <div id="container" className="bg-gray-900">
+        <div id="container" className="grid grid-rows-[auto_1fr] grid-cols-[3fr_1fr] bg-gray-900">
           <VideoPlayer streamId={streamId} />
           <div
             id="chat"
-            className="relative top-0 right-0 bg-gray-800 bg-opacity-75 text-white p-4 w-1/3 h-full z-10 overflow-y-auto"
+            className="relative top-0 right-0 w-full h-full bg-gray-800 bg-opacity-75 text-white p-4 w-1/3 z-10"
+            style={{ gridArea: "1 / 2 / 3 / 3" }}
           >
             <ChatPanel streamId={streamId} />
           </div>
           <div
             id="stream-info"
             className="flex flex-col gap-2 p-4 text-white"
-            style={{ gridArea: "3 / 1 / 4 / 2" }}
+            style={{ gridArea: "2 / 1 / 3 / 2" }}
           >
             <h1 className="text-2xl font-bold">
               {streamData ? streamData.streamTitle : "Loading..."}