Improving video CSS (work on overlay)

front/dist/resources/style/style.css

@@ -260,7 +260,7 @@ body {
     }
 
     .sidebar > div {
-        height: 15%;
+        max-height: 21%;
     }
 }
 @media (max-aspect-ratio: 1/1) {
@@ -278,7 +278,7 @@ body {
     }
 
     .sidebar > div {
-        width: 15%;
+        max-width: 21%;
     }
 }
 
@@ -342,6 +342,14 @@ body {
     margin: 2%;
 }
 
+/* Let's make sure videos are vertically centered if they need to be cropped */
+.media-container {
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    overflow: hidden;
+}
+
 .chat-mode {
     display: flex;
     width: 100%;

front/src/WebRtc/LayoutManager.ts

@@ -28,6 +28,7 @@ class LayoutManager {
         const div = document.createElement('div');
         div.innerHTML = html;
         div.id = "user-"+userId;
+        div.className = "media-container"
 
         if (importance === DivImportance.Important) {
             this.importantDivs.set(userId, div);