profile picture overflow issue in 2 users box

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);