From ea1cf80e67f7fc6d13f574a01da40748d79c4daa Mon Sep 17 00:00:00 2001
From: errorbyme <errorby0@gmail.com>
Date: Mon, 8 Jun 2026 20:29:09 +0530
Subject: [PATCH] profile picture overflow issue in 2 users box

---
 web/plugin.head.html | 60 ++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 58 insertions(+), 2 deletions(-)

diff --git a/web/plugin.head.html b/web/plugin.head.html
index b79fb7e..306c6cd 100644
--- a/web/plugin.head.html
+++ b/web/plugin.head.html
@@ -2181,8 +2181,8 @@
             return Math.floor(Math.min(maxByWidth, maxByHeight, responsiveCap));
         }
 
-        function clampPoliticTalkTileAvatarSize(tile, avatarContainer) {
-            var maxSize = getPoliticTalkTileAvatarMaxSize(tile);
+        function clampPoliticTalkTileAvatarSize(tile, avatarContainer, maxSizeOverride) {
+            var maxSize = Number.isFinite(maxSizeOverride) ? maxSizeOverride : getPoliticTalkTileAvatarMaxSize(tile);
 
             if (!maxSize || !avatarContainer) {
                 return;
@@ -2280,6 +2280,61 @@
             });
         }
 
+        function getPoliticTalkThumbnailAvatarMaxSize(thumbnail) {
+            if (!thumbnail) {
+                return null;
+            }
+
+            var rect = thumbnail.getBoundingClientRect();
+
+            if (!rect.width || !rect.height) {
+                return null;
+            }
+
+            var footerHeight = Math.min(36, Math.max(24, rect.height * 0.24));
+            var mediaHeight = Math.max(32, rect.height - footerHeight - 10);
+            var maxByWidth = rect.width * 0.42;
+            var maxByHeight = mediaHeight * 0.58;
+
+            return Math.floor(Math.max(30, Math.min(maxByWidth, maxByHeight, 64)));
+        }
+
+        function centerPoliticTalkThumbnailAvatar(thumbnail) {
+            if (!thumbnail) {
+                return;
+            }
+
+            var thumbnailRect = thumbnail.getBoundingClientRect();
+            var maxSize = getPoliticTalkThumbnailAvatarMaxSize(thumbnail);
+
+            if (!maxSize) {
+                return;
+            }
+
+            var footerHeight = Math.min(36, Math.max(24, thumbnailRect.height * 0.24));
+            var centerY = Math.max(8 + maxSize / 2, (thumbnailRect.height - footerHeight) / 2);
+
+            Array.prototype.slice.call(thumbnail.children || []).forEach(function(candidate) {
+                var className = String(candidate.className || '');
+                var isAvatarContainer = candidate.classList.contains('avatar-container')
+                    || className.indexOf('avatar-container') !== -1
+                    || className.indexOf('avatarContainer') !== -1;
+
+                if (!isAvatarContainer) {
+                    return;
+                }
+
+                setPoliticTalkImportantStyle(candidate, 'bottom', 'auto');
+                setPoliticTalkImportantStyle(candidate, 'left', '50%');
+                setPoliticTalkImportantStyle(candidate, 'margin', '0');
+                setPoliticTalkImportantStyle(candidate, 'position', 'absolute');
+                setPoliticTalkImportantStyle(candidate, 'right', 'auto');
+                setPoliticTalkImportantStyle(candidate, 'top', centerY + 'px');
+                setPoliticTalkImportantStyle(candidate, 'transform', 'translate(-50%, -50%)');
+                clampPoliticTalkTileAvatarSize(thumbnail, candidate, maxSize);
+            });
+        }
+
         function getPoliticTalkAvailableTileHeight(videospace) {
             var videospaceRect = videospace.getBoundingClientRect();
             var toolbar = getVisiblePoliticTalkToolbar();
@@ -2863,6 +2918,7 @@
                     thumbnail,
                     metadata
                 );
+                centerPoliticTalkThumbnailAvatar(thumbnail);
             });
 
             applyPoliticTalkParticipantPaneAvatarTheme(videospace, tiles, thumbnails);