fix(avatar): dynamically size avatar in dynamically sizable filmstrip

css/_videolayout_default.scss

@@ -525,12 +525,21 @@
     transition: box-shadow 0.3s ease;
 }
 
-.userAvatar {
+.avatar-container {
     @include maxSize(60px);
     @include absoluteAligning();
     border-radius: 50%;
+    display: flex;
+    justify-content: center;
     height: 50%;
+    overflow: hidden;
     width: auto;
+
+    .userAvatar {
+        height: 100%;
+        object-fit: cover;
+        width: 100%;
+    }
 }
 
 #videoNotAvailableScreen {

css/filmstrip/_tile_view_overrides.scss

@@ -6,7 +6,7 @@
     /**
      * Let the avatar grow with the tile.
      */
-    .userAvatar {
+    .avatar-container {
         max-height: initial;
         max-width: initial;
     }

modules/UI/videolayout/Filmstrip.js

@@ -361,6 +361,12 @@ const Filmstrip = {
                 'min-width': `${local.thumbWidth}px`,
                 width: `${local.thumbWidth}px`
             });
+
+            const avatarSize = local.thumbHeight / 2;
+
+            thumbs.localThumb.find('.avatar-container')
+                .height(avatarSize)
+                .width(avatarSize);
         }
 
         if (thumbs.remoteThumbs) {
@@ -371,6 +377,12 @@ const Filmstrip = {
                 'min-width': `${remote.thumbWidth}px`,
                 width: `${remote.thumbWidth}px`
             });
+
+            const avatarSize = remote.thumbHeight / 2;
+
+            thumbs.remoteThumbs.find('.avatar-container')
+                .height(avatarSize)
+                .width(avatarSize);
         }
 
         const currentLayout = getCurrentLayout(APP.store.getState());