fix display login form and video on mibile

static/sfu.css

@@ -880,10 +880,6 @@ header .colapse {
         display: none;
     }
 
-    .label {
-        margin: 5px 5px 5px 30%;
-    }
-
     .video-container {
         height: calc(100vh - 64px);
         position: fixed;
@@ -893,6 +889,19 @@ header .colapse {
         margin-bottom: 60px;
     }
 
+    .login-container {
+        height: calc(100vh - 64px);
+        position: fixed;
+        top: 64px;
+        right: 0;
+        left: 0;
+        background: #eff3f9;
+    }
+
+    .login-box {
+        left: calc(100vw / 2 - 10.5em);
+    }
+
     .coln-left {
         flex: 100%;
         width: 100vw;
@@ -943,4 +952,8 @@ header .colapse {
       display: none;
     }
 
+    #sharebutton {
+      display: none;
+    }
+
 }

static/sfu.js

@@ -60,6 +60,7 @@ function hideVideo(force) {
     }
     let video_container = document.getElementById('video-container');
     video_container.classList.add('no-video');
+    document.getElementById('switch-video').style.display = "";
 }
 
 /**
@@ -648,7 +649,7 @@ function resizePeers() {
         return;
     let rows = "";
     let size = 100 / columns;
-    // Peers div has padding 10 on top and bottom, remove 20 on offsetHeight
+    // Peers div has total padding of 30px, we remove 30 on offsetHeight
     let max_video_height = Math.trunc((peers.offsetHeight - 30) / columns);
     for(let i = 0; i < columns; i++){
       rows += size + "% ";