FIX: Styling update to VideoPage to support smaller screens;

frontend/src/components/Video/ChatPanel.tsx

@@ -116,7 +116,7 @@ const ChatPanel: React.FC<ChatPanelProps> = ({
   return (
     <div
       id="chat-panel"
-      className="max-w-[30vw] h-[83vh] flex flex-col rounded-lg p-[2vh] justify-between"
+      className="max-w-[30vw] max-h-[83vh] flex flex-col rounded-lg p-[2vh] justify-between"
       style={{ gridArea: "1 / 2 / 3 / 3" }}
     >
       {/* Chat Header */}

frontend/src/components/Video/VideoPlayer.tsx

@@ -25,6 +25,7 @@ const VideoPlayer: React.FC = () => {
         muted: true,
         fluid: true,
         responsive: true,
+        aspectRatio: "16:9",
         liveui: true,
         sources: [
           {
@@ -58,7 +59,7 @@ const VideoPlayer: React.FC = () => {
 
   return (
     <div className="min-w-[65vw] w-full h-full flex justify-center items-center bg-gray-900 rounded-lg">
-      <div ref={videoRef} className="w-full max-w-[80vw] self-center" />
+      <div ref={videoRef} className="w-full max-w-[160vh] self-center" />
     </div>
   );
 };