Improve layout

frontend/src/pages/chat/css/_callWindow.scss

@@ -52,10 +52,6 @@
                 gap: 24px;
                 min-height: 400px;
             }
-
-            .screen-share-tile {
-                min-height: 60vh;
-            }
         }
 
         .call-header {
@@ -155,7 +151,7 @@
             }
 
         .screen-share-tile {
-            min-height: 150px;
+            // min-height removed to allow dynamic sizing based on video content
             
             .screen-share-video {
                 object-fit: contain;
@@ -307,18 +303,84 @@
 .call-content {
     padding: 24px;
     display: flex;
-    flex-direction: column;
+    flex-direction: row;
     gap: 20px;
     position: relative;
     z-index: 1;
     flex: 1;
-    overflow-y: auto;
+    overflow: hidden;
 
-    .video-tiles-grid {
+    // Reduce padding when screen share is active to maximize space
+    &.with-screen-share {
+        padding: 12px;
+        gap: 16px;
+    }
+
+    // Default layout (no screen share): tiles in grid
+    .screen-share-area {
+        display: none;
+    }
+
+    .video-tiles-sidebar {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         gap: 20px;
-        min-height: 300px;
+        flex: 1;
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+
+    // Layout with screen share: screen share on left, video tiles on right
+    &.with-screen-share {
+        .screen-share-area {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            flex: 4; // Give 4x more space than sidebar
+            min-width: 0;
+            max-width: 80vw; // Limit screen share to 80% of viewport width
+            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+            position: relative;
+            // Ensure no padding/margin that could create blank space
+            padding: 0;
+            margin: 0;
+        }
+
+        .video-tiles-sidebar {
+            display: flex;
+            flex-direction: column;
+            grid-template-columns: none;
+            flex: 1; // Give 1x space (4:1 ratio = 80:20)
+            min-width: 250px; // Ensure minimum 300px width
+            max-width: 20%; // Cap at 20% of container
+            flex-shrink: 0;
+            gap: 16px;
+            overflow-y: auto;
+            overflow-x: hidden;
+            padding: 5px;
+            
+            // Custom scrollbar
+            &::-webkit-scrollbar {
+                width: 6px;
+            }
+
+            &::-webkit-scrollbar-track {
+                background: rgba($color-dark-surface-variant, 0.3);
+                border-radius: 3px;
+            }
+
+            &::-webkit-scrollbar-thumb {
+                background: rgba($color-dark-primary, 0.5);
+                border-radius: 3px;
+                
+                &:hover {
+                    background: rgba($color-dark-primary, 0.7);
+                }
+            }
+
+            .video-tile {
+                min-height: 168px;
+            }
+        }
     }
 
     .video-tile {
@@ -326,7 +388,6 @@
         background: rgba($color-dark-surface-variant, 0.5);
         border-radius: 16px;
         overflow: hidden;
-        aspect-ratio: 4 / 3;
         display: flex;
         align-items: center;
         justify-content: center;
@@ -391,24 +452,40 @@
     }
 
     .screen-share-tile {
-        aspect-ratio: 16 / 9;
+        position: relative;
-        min-height: 480px;
-        grid-column: 1 / -1;
         border: 2px solid rgba($color-dark-primary, 0.6);
+        border-radius: 12px;
         overflow: hidden;
+        background: rgba(0, 0, 0, 0.95);
+        display: inline-block;
+        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
+        // Constrain to available space but size to content
+        max-width: 100%;
+        max-height: 100%;
 
         .screen-share-video {
-            width: 100%;
+            width: auto;
-            height: 100%;
+            height: auto;
+            max-width: 100%;
+            max-height: 100%;
+            display: block;
             object-fit: contain;
-            background: rgba(0, 0, 0, 0.95);
         }
 
         .tile-label {
+            position: absolute;
+            bottom: 12px;
+            left: 50%;
+            transform: translateX(-50%);
             font-size: 14px;
             padding: 8px 16px;
             background: rgba($color-dark-primary, 0.9);
             color: $color-dark-on-primary;
+            border-radius: 8px;
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            pointer-events: none;
+            z-index: 1;
         }
     }
 }

frontend/src/pages/chat/ui/right/calls/CallWindow.tsx

@@ -239,9 +239,10 @@ export function CallWindow() {
                             </div>
                         </div>
 
-                        <div className="call-content">
+                        <div className={`call-content ${(call.isSharingScreen || call.isRemoteScreenSharing) ? "with-screen-share" : ""}`}>
-                            {/* Screen share tiles - larger and more prominent */}
+                            {/* Main screen share area - takes most space when active */}
-                            {/* Always render but hide when not in use to keep refs valid */}
+                            <div className="screen-share-area">
+                                {/* Local screen share */}
                                 <div 
                                     className="video-tile screen-share-tile local-screen-share"
                                     style={{ display: call.isSharingScreen ? "flex" : "none" }}>
@@ -254,6 +255,7 @@ export function CallWindow() {
                                     <div className="tile-label">Your Screen</div>
                                 </div>
                                 
+                                {/* Remote screen share */}
                                 <div 
                                     className="video-tile screen-share-tile remote-screen-share"
                                     style={{ display: call.isRemoteScreenSharing ? "flex" : "none" }}>
@@ -264,9 +266,10 @@ export function CallWindow() {
                                         playsInline />
                                     <div className="tile-label">{remoteUsername}&apos;s Screen</div>
                                 </div>
+                            </div>
 
-                            {/* Video tiles grid */}
+                            {/* Video tiles sidebar - appears on right when screen share is active */}
-                            <div className="video-tiles-grid">
+                            <div className="video-tiles-sidebar">
                                 {/* Local video tile */}
                                 <div className="video-tile local-video">
                                     <video