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>
   );
 };

frontend/src/pages/HomePage.tsx

@@ -47,9 +47,9 @@ const HomePage: React.FC<HomePageProps> = ({ variant = "default" }) => {
         onClick={handleStreamClick}
         extraClasses="bg-red-950/60"
       >
-        <Button extraClasses="absolute right-10" onClick={() => navigate("/")}>
+        {/* <Button extraClasses="absolute right-10" onClick={() => navigate("/")}>
           Show More . . .
-        </Button>
+        </Button> */}
       </ListRow>
 
       {/* If Personalised_HomePage, display Categories the logged-in user follows. Else, trending categories. */}

frontend/src/pages/VideoPage.tsx

@@ -97,7 +97,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
 
   return (
     <SocketProvider>
-      <div id="videoPage" className="w-full h-full bg-gray-900 flex flex-col">
+      <div id="videoPage" className="w-full h-full min-h-screen bg-gray-900 flex flex-col">
         <Navbar />
 
         <div
@@ -149,7 +149,7 @@ const VideoPage: React.FC<VideoPageProps> = ({ streamerId }) => {
           </div>
 
           {/* Stream Title */}
-          <div className="flex flex-col items-start min-w-[45%] max-w-[60%] mx-12 text-pretty">
+          <div className="flex flex-col items-start min-w-fit max-w-[60%] mx-8 text-wrap">
             <h1 className="text-[1rem] lg:text-[1.25em] xl:text-[1.5em] font-bold">
               {streamData ? streamData.streamTitle : "Loading..."}
             </h1>