From 204c0f8d1d717f61692c05b35204ef2474a19917 Mon Sep 17 00:00:00 2001
From: anshika1179 <anshika1179@users.noreply.github.com>
Date: Tue, 4 Aug 2026 16:06:01 +0530
Subject: [PATCH] fix: make video room layout responsive on mobile portrait
 (#1910)

---
 src/components/VideoRoom.tsx | 2 +-
 src/pages/Sessions.tsx       | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/VideoRoom.tsx b/src/components/VideoRoom.tsx
index 81108ec7..1f724c53 100644
--- a/src/components/VideoRoom.tsx
+++ b/src/components/VideoRoom.tsx
@@ -10,7 +10,7 @@ interface VideoRoomProps {
 
 const VideoRoom: React.FC<VideoRoomProps> = ({ roomName, userName, onLeave }) => {
   return (
-    <div className="w-full h-[750px] bg-white/5 border border-white/10 backdrop-blur-2xl rounded-3xl overflow-hidden relative">
+    <div className="w-full h-[60vh] md:h-[750px] bg-white/5 border border-white/10 backdrop-blur-2xl rounded-3xl overflow-hidden relative flex flex-col">
       <JitsiMeeting
         domain="meet.jit.si"
         roomName={`PeerLearning_${roomName}`}
diff --git a/src/pages/Sessions.tsx b/src/pages/Sessions.tsx
index ab525f5f..83094649 100644
--- a/src/pages/Sessions.tsx
+++ b/src/pages/Sessions.tsx
@@ -60,7 +60,7 @@ export default function Sessions() {
         />
 
         {/* CONTENT */}
-        <div className="grid lg:grid-cols-3 gap-6">
+        <div className="flex flex-col lg:grid lg:grid-cols-3 gap-6">
           {/* LEFT SIDE */}
           <div className="lg:col-span-2">
             <div className="flex items-center gap-2 mb-6">