Update syle mobile

- update my video side
- update user video side
- update button video cam and microphone side

front/dist/resources/style/index.scss

@@ -1,2 +1,3 @@
 @import "cowebsite.scss";
-@import "style.css";
+@import "style.css";
+@import "mobile-style.scss";

front/dist/resources/style/mobile-style.scss

@@ -1,17 +1,50 @@
-@media only screen and (max-width: 600px) {
+@media only screen and (max-width: 700px) {
-  .sidebar > div {
+  video#myCamVideo {
-    max-height: 240px;
+    width: 200px;
   }
 
-  .sidebar > div {
+  .sidebar {
-    max-height: 240px;
+    width: 20%;
+    min-width: 200px;
+    position: absolute;
+    display: block;
+    right: 0;
+    height: 80%;
+
+    &> div {
+      max-height: 120px;
+      min-width: 200px;
+    }
+
+    .video-container{
+      min-width: 200px;
+    }
   }
 
-  .sidebar{
+  .btn-cam-action div {
-    max-width: 200px;
+    bottom: 30px;
+
+    &.btn-micro {
+      right: 15px;
+    }
+
+    &.btn-monitor {
+      right: 171px;
+    }
+
+    &.btn-video {
+      right: 95px;
+    }
   }
 
-  .btn-cam-action div{
+  .main-section {
-    bottom: 50px;
+    position: absolute;
+    width: 100%;
+    min-width: 400px;
+
+    & > div {
+      z-index: 2;
+    }
   }
-}
+}
+

front/dist/resources/style/style.css

@@ -338,24 +338,6 @@ body {
 
     
 }
-@media (max-aspect-ratio: 1/1) {
-    .game-overlay {
-        flex-direction: column;
-    }
-
-    .sidebar {
-        flex-direction: row;
-        align-items: flex-end;
-    }
-
-    .sidebar > div {
-        max-width: 21%;
-    }
-
-    .sidebar > div:hover {
-        max-width: 25%;
-    }
-}
 
 #game {
     width: 100%;