From fe77dac82ba1781fcb63abff16c077a21e83400c Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Thu, 18 Dec 2025 10:11:57 +0100
Subject: [PATCH] [mirotalk] - fix video circle

---
 .env.template              |  2 +-
 app/src/config.template.js |  2 +-
 app/src/server.js          |  2 +-
 package-lock.json          |  4 ++--
 package.json               |  2 +-
 public/css/videoGrid.css   | 10 ++++------
 public/js/brand.js         |  2 +-
 public/js/client.js        |  4 ++--
 public/js/videoGrid.js     |  5 ++++-
 9 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/.env.template b/.env.template
index 8147a81b..89b0fbc9 100644
--- a/.env.template
+++ b/.env.template
@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.6.85 - Environment Configuration
+# MiroTalk P2P v.1.6.86 - Environment Configuration
 # ====================================================
 
 # App environment
diff --git a/app/src/config.template.js b/app/src/config.template.js
index 05b907e2..49262d4f 100644
--- a/app/src/config.template.js
+++ b/app/src/config.template.js
@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.6.85 - Configuration File
+ * MiroTalk P2P v.1.6.86 - Configuration File
  * ==============================================
  *
  * Branding and customizations require a license:
diff --git a/app/src/server.js b/app/src/server.js
index 7658db72..f9f4be3d 100755
--- a/app/src/server.js
+++ b/app/src/server.js
@@ -45,7 +45,7 @@ dependencies: {
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.6.85
+ * @version 1.6.86
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index e39aedf1..752963f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalk",
-    "version": "1.6.85",
+    "version": "1.6.86",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.6.85",
+            "version": "1.6.86",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@mattermost/client": "11.2.0",
diff --git a/package.json b/package.json
index ea4a0fd3..5fd60a65 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.6.85",
+    "version": "1.6.86",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
diff --git a/public/css/videoGrid.css b/public/css/videoGrid.css
index 1260f8ef..5967fe17 100644
--- a/public/css/videoGrid.css
+++ b/public/css/videoGrid.css
@@ -281,12 +281,10 @@
     width: var(--vmi-wh);
     height: var(--vmi-wh);
     border-radius: 50%;
-    /* center */
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    margin: auto;
+    /* reliable centering - works in all scenarios */
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%) !important;
     transition: box-shadow 0.2s ease;
 }
 
diff --git a/public/js/brand.js b/public/js/brand.js
index 8d56a9a7..870e49e2 100644
--- a/public/js/brand.js
+++ b/public/js/brand.js
@@ -77,7 +77,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.6.85',
+        title: 'WebRTC P2P v1.6.86',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/client.js b/public/js/client.js
index 4a572b07..2a7c7da1 100644
--- a/public/js/client.js
+++ b/public/js/client.js
@@ -15,7 +15,7 @@
  * @license For commercial use or closed source, contact us at license.mirotalk@gmail.com or purchase directly from CodeCanyon
  * @license CodeCanyon: https://codecanyon.net/item/mirotalk-p2p-webrtc-realtime-video-conferences/38376661
  * @author  Miroslav Pejic - miroslav.pejic.85@gmail.com
- * @version 1.6.85
+ * @version 1.6.86
  *
  */
 
@@ -13388,7 +13388,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.85',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.6.86',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `
diff --git a/public/js/videoGrid.js b/public/js/videoGrid.js
index e62ef916..80653d8f 100644
--- a/public/js/videoGrid.js
+++ b/public/js/videoGrid.js
@@ -104,7 +104,10 @@ function resizeVideoMedia() {
 
     max = best - Margin * 2;
     setWidth(Tiles, max, bigWidth, Margin, Height, isOneVideoElement);
-    setSP('--vmi-wh', max / 3 + 'px');
+
+    // When alone, use fixed avatar size; otherwise proportional to tile
+    const avatarSize = isOneVideoElement ? Math.min(200, Math.max(120, Height * 0.25)) : max / 3;
+    setSP('--vmi-wh', avatarSize + 'px');
 }
 
 /**