From 37aebdb2f7f18ec77b54850249b8aaf1fe82be48 Mon Sep 17 00:00:00 2001
From: Miroslav Pejic <miroslav.pejic.85@gmail.com>
Date: Wed, 29 Apr 2026 23:21:52 +0200
Subject: [PATCH] [mirotalk] - profile tab UI improvements

---
 .env.template              |  2 +-
 app/src/config.template.js |  2 +-
 app/src/server.js          |  2 +-
 package-lock.json          |  4 ++--
 package.json               |  2 +-
 public/css/client.css      | 32 ++++++++++++++++++++++++++++++--
 public/js/brand.js         |  2 +-
 public/js/client.js        |  4 ++--
 public/views/client.html   | 22 +++++++++++-----------
 9 files changed, 50 insertions(+), 22 deletions(-)

diff --git a/.env.template b/.env.template
index b032cfb7..f69136f4 100644
--- a/.env.template
+++ b/.env.template
@@ -1,5 +1,5 @@
 # ====================================================
-# MiroTalk P2P v.1.8.22 - Environment Configuration
+# MiroTalk P2P v.1.8.23 - Environment Configuration
 # ====================================================
 
 # App environment
diff --git a/app/src/config.template.js b/app/src/config.template.js
index 43f72f68..bde5d3b4 100644
--- a/app/src/config.template.js
+++ b/app/src/config.template.js
@@ -2,7 +2,7 @@
 
 /**
  * ==============================================
- * MiroTalk P2P v.1.8.22 - Configuration File
+ * MiroTalk P2P v.1.8.23 - Configuration File
  * ==============================================
  *
  * This file is the central configuration source.
diff --git a/app/src/server.js b/app/src/server.js
index d30b5115..0f507b95 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.8.22
+ * @version 1.8.23
  *
  */
 
diff --git a/package-lock.json b/package-lock.json
index f18fd25a..987193a5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
     "name": "mirotalk",
-    "version": "1.8.22",
+    "version": "1.8.23",
     "lockfileVersion": 3,
     "requires": true,
     "packages": {
         "": {
             "name": "mirotalk",
-            "version": "1.8.22",
+            "version": "1.8.23",
             "license": "AGPL-3.0",
             "dependencies": {
                 "@mattermost/client": "11.6.0",
diff --git a/package.json b/package.json
index 275301d4..7516cb15 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "mirotalk",
-    "version": "1.8.22",
+    "version": "1.8.23",
     "description": "A free WebRTC browser-based video call",
     "main": "server.js",
     "scripts": {
diff --git a/public/css/client.css b/public/css/client.css
index ab632ac2..86e37aec 100755
--- a/public/css/client.css
+++ b/public/css/client.css
@@ -3318,7 +3318,7 @@ button {
 --------------------------------------------------------------*/
 
 #myPeerNameSet {
-    width: 50%;
+    flex: 1;
     padding: 10px;
     border: var(--border);
     border-radius: 8px;
@@ -3331,6 +3331,19 @@ button {
     margin-bottom: 5px;
 }
 
+#myProfileAvatarContainer {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    gap: 12px;
+}
+
+#myProfileAvatarBtns {
+    display: flex;
+    flex-direction: column;
+    gap: 6px;
+}
+
 #myProfileAvatar {
     margin-top: 10px;
     width: 64px;
@@ -3419,7 +3432,22 @@ button {
 
 #myProfileAvatarUploadBtn,
 #myProfileAvatarResetBtn {
-    margin-top: 6px;
+    margin-top: 0;
+}
+
+#myPeerNameSetContainer {
+    display: flex;
+    align-items: stretch;
+    gap: 8px;
+}
+
+#myPeerNameSetBtn {
+    padding: 10px 8px;
+    font-size: 0.75rem;
+    white-space: nowrap;
+    width: fit-content;
+    flex-shrink: 0;
+    box-sizing: border-box;
 }
 
 /*--------------------------------------------------------------
diff --git a/public/js/brand.js b/public/js/brand.js
index 7df99aa0..4b2ef182 100644
--- a/public/js/brand.js
+++ b/public/js/brand.js
@@ -109,7 +109,7 @@ let brand = {
     },
     about: {
         imageUrl: '../images/mirotalk-logo.gif',
-        title: 'WebRTC P2P v1.8.22',
+        title: 'WebRTC P2P v1.8.23',
         html: `
             <button 
                 id="support-button" 
diff --git a/public/js/client.js b/public/js/client.js
index f5abd89d..35c806c5 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.8.22
+ * @version 1.8.23
  *
  */
 
@@ -15580,7 +15580,7 @@ function showAbout() {
     Swal.fire({
         background: swBg,
         position: 'center',
-        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.22',
+        title: brand.about?.title && brand.about.title.trim() !== '' ? brand.about.title : 'WebRTC P2P v1.8.23',
         imageUrl: brand.about?.imageUrl && brand.about.imageUrl.trim() !== '' ? brand.about.imageUrl : images.about,
         customClass: { image: 'img-about' },
         html: `
diff --git a/public/views/client.html b/public/views/client.html
index 3b527893..543ac5db 100755
--- a/public/views/client.html
+++ b/public/views/client.html
@@ -1062,16 +1062,16 @@ access to use this app.
 
                     <div id="tabProfile" class="tabcontent">
                         <div id="tabRoomPeerName">
-                            <div>
+                            <div id="myProfileAvatarContainer">
                                 <img id="myProfileAvatar" />
-                            </div>
-                            <div>
-                                <button id="myProfileAvatarUploadBtn">
-                                    <i class="fas fa-image"></i>&nbsp;Set avatar
-                                </button>
-                                <button id="myProfileAvatarResetBtn" class="hidden">
-                                    <i class="fas fa-rotate-left"></i>&nbsp;Reset avatar
-                                </button>
+                                <div id="myProfileAvatarBtns">
+                                    <button id="myProfileAvatarUploadBtn">
+                                        <i class="fas fa-image"></i>&nbsp;Set avatar
+                                    </button>
+                                    <button id="myProfileAvatarResetBtn" class="hidden">
+                                        <i class="fas fa-rotate-left"></i>&nbsp;Reset avatar
+                                    </button>
+                                </div>
                             </div>
                             <br />
                             <div class="title">
@@ -1079,9 +1079,9 @@ access to use this app.
                                 <p>Name</p>
                             </div>
                             <br /><br />
-                            <div>
+                            <div id="myPeerNameSetContainer">
                                 <input id="myPeerNameSet" type="text" placeholder="Change name..." maxlength="254" />
-                                <button id="myPeerNameSetBtn"><i class="fas fa-user-edit"></i>&nbsp;Change name</button>
+                                <button id="myPeerNameSetBtn"><i class="fas fa-user-edit"></i>&nbsp;Change</button>
                             </div>
                         </div>
                         <br />