[mirotalksfu] - improve video menu bar buttons UI

public/css/VideoGrid.css

@@ -272,16 +272,53 @@
     height: 6px;
 }
 
-.expand-video-content button {
+/* Button Group Container */
+.expand-video-content .button-group {
     display: flex !important;
+    gap: 8px;
+    flex-wrap: nowrap;
+    width: 100%;
+}
+
+/* Individual Buttons */
+.expand-video-content .button-group button {
+    text-align: center;
+    padding: 0 12px;
     font-size: 16px;
     color: #fff;
     background: var(--btns-bg-color);
-    width: 100%;
-    height: 45px;
+    min-width: 48px;
+    min-height: 48px;
     justify-content: center;
     align-items: center;
     border-radius: 10px;
+    border: none;
+    cursor: pointer;
+    transition:
+        background 0.2s ease,
+        transform 0.1s ease;
+}
+
+/* Hover & Active Effects */
+.expand-video-content .button-group button:hover {
+    background: var(--body-bg);
+    transform: scale(1.05);
+}
+
+.expand-video-content .button-group button:active {
+    transform: scale(0.95);
+}
+
+@media (max-width: 600px) {
+    .expand-video-content .button-group {
+        gap: 5px;
+    }
+    .expand-video-content .button-group button {
+        font-size: 14px;
+        min-width: 44px;
+        min-height: 44px;
+        padding: 0 8px;
+    }
 }
 
 .expand-video-content button:hover {

public/js/Brand.js

@@ -64,7 +64,7 @@ let BRAND = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: '<strong>WebRTC SFU v1.7.97</strong>',
+        title: '<strong>WebRTC SFU v1.7.98</strong>',
         html: `
             <button 
                 id="support-button" 

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.7.97
+ * @version 1.7.98
  *
  */
 
@@ -5294,7 +5294,7 @@ function showAbout() {
         position: 'center',
         imageUrl: BRAND.about?.imageUrl && BRAND.about.imageUrl.trim() !== '' ? BRAND.about.imageUrl : image.about,
         customClass: { image: 'img-about' },
-        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.7.97',
+        title: BRAND.about?.title && BRAND.about.title.trim() !== '' ? BRAND.about.title : 'WebRTC SFU v1.7.98',
         html: `
             <br />
             <div id="about">

public/js/RoomClient.js

@@ -9,7 +9,7 @@
  * @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.7.97
+ * @version 1.7.98
  *
  */
 
@@ -2837,13 +2837,17 @@ class RoomClient {
                 vb.appendChild(peerNameHeader);
                 eVc.appendChild(peerNameHeader);
 
-                BUTTONS.consumerVideo.sendMessageButton && eVc.appendChild(sm);
-                BUTTONS.consumerVideo.sendFileButton && eVc.appendChild(sf);
-                BUTTONS.consumerVideo.sendVideoButton && eVc.appendChild(sv);
-                BUTTONS.consumerVideo.geolocationButton && eVc.appendChild(gl);
-                BUTTONS.consumerVideo.banButton && eVc.appendChild(ban);
-                BUTTONS.consumerVideo.ejectButton && eVc.appendChild(ko);
+                const buttonGroup = document.createElement('div');
+                buttonGroup.className = 'button-group';
 
+                BUTTONS.consumerVideo.sendMessageButton && buttonGroup.appendChild(sm);
+                BUTTONS.consumerVideo.sendFileButton && buttonGroup.appendChild(sf);
+                BUTTONS.consumerVideo.sendVideoButton && buttonGroup.appendChild(sv);
+                BUTTONS.consumerVideo.geolocationButton && buttonGroup.appendChild(gl);
+                BUTTONS.consumerVideo.banButton && buttonGroup.appendChild(ban);
+                BUTTONS.consumerVideo.ejectButton && buttonGroup.appendChild(ko);
+
+                eVc.appendChild(buttonGroup);
                 eDiv.appendChild(eBtn);
                 eDiv.appendChild(eVc);
                 vb.appendChild(eDiv);