[mirotalksfu] - improve video bar buttons UI

app/src/Server.js

@@ -55,7 +55,7 @@ dev dependencies: {
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.6.20
+ * @version 1.6.21
  *
  */
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "mirotalksfu",
-    "version": "1.6.20",
+    "version": "1.6.21",
     "description": "WebRTC SFU browser-based video calls",
     "main": "Server.js",
     "scripts": {

public/css/VideoGrid.css

@@ -190,20 +190,22 @@
     transition: all 0.3s ease-in-out;
 }
 
-.expand-video {
-    position: fixed;
-    left: 10px;
+.expand-video .fa-bars {
+    color: #66beff !important;
 }
 
 .expand-video .dropdown-button {
     cursor: pointer;
+    position: relative;
 }
 
 .expand-video-content {
     z-index: 1;
     display: none;
     position: fixed;
-    min-width: 50%;
+    right: 10px;
+    width: calc(100% - 20px);
+    max-width: 500px;
     padding: 20px;
     border-radius: 5px;
     background: var(--body-bg);

public/js/Room.js

@@ -11,7 +11,7 @@ if (location.href.substr(0, 5) !== 'https') location.href = 'https' + location.h
  * @license For commercial or closed source, contact us at license.mirotalk@gmail.com or purchase directly via CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-sfu-webrtc-realtime-video-conferences/40769970
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.6.20
+ * @version 1.6.21
  *
  */
 
@@ -4564,7 +4564,7 @@ function showAbout() {
         imageUrl: image.about,
         customClass: { image: 'img-about' },
         position: 'center',
-        title: 'WebRTC SFU v1.6.20',
+        title: 'WebRTC SFU v1.6.21',
         html: `
         <br />
         <div id="about">