fix(responsive-ui): Shrink self view when in portrait mode on mobile web

css/filmstrip/_vertical_filmstrip_overrides.scss

@@ -84,6 +84,10 @@
         margin-bottom: 3px;
         margin-left: $remoteVideoMenuIconMargin;
     }
+
+    .self-view-mobile-portrait video {
+        object-fit: contain;
+    }
 }
 
 /**
@@ -112,3 +116,11 @@
         transition-delay: 0.1s;
     }
 }
+
+/**
+ * Overrides for self view when in portrait mode on mobile.
+ * This is done in order to keep the aspect ratio.
+ */
+.vertical-filmstrip .self-view-mobile-portrait #localVideo_container {
+    object-fit: contain;
+}

react/features/filmstrip/components/web/Thumbnail.js

@@ -34,7 +34,6 @@ import {
     DISPLAY_MODE_TO_STRING,
     DISPLAY_VIDEO,
     DISPLAY_VIDEO_WITH_NAME,
-    MOBILE_FILMSTRIP_PORTRAIT_RATIO,
     VIDEO_TEST_EVENTS,
     SHOW_TOOLBAR_CONTEXT_MENU_AFTER
 } from '../../constants';
@@ -771,7 +770,6 @@ class Thumbnail extends Component<Props, State> {
         const {
             _defaultLocalDisplayName,
             _disableLocalVideoFlip,
-            _height,
             _isMobile,
             _isMobilePortrait,
             _isScreenSharing,
@@ -783,13 +781,14 @@ class Thumbnail extends Component<Props, State> {
         const { id } = _participant || {};
         const { audioLevel } = this.state;
         const styles = this._getStyles();
-        const containerClassName = this._getContainerClassName();
+        let containerClassName = this._getContainerClassName();
         const videoTrackClassName
             = !_disableLocalVideoFlip && _videoTrack && !_isScreenSharing && _localFlipX ? 'flipVideoX' : '';
 
-        styles.thumbnail.height = _isMobilePortrait
-            ? `${Math.floor(_height * MOBILE_FILMSTRIP_PORTRAIT_RATIO)}px`
-            : styles.thumbnail.height;
+        if (_isMobilePortrait) {
+            styles.thumbnail.height = styles.thumbnail.width;
+            containerClassName = `${containerClassName} self-view-mobile-portrait`;
+        }
 
         return (
             <span

react/features/filmstrip/constants.js

@@ -221,14 +221,6 @@ export const HORIZONTAL_FILMSTRIP_MARGIN = 39;
  */
 export const SHOW_TOOLBAR_CONTEXT_MENU_AFTER = 600;
 
-
-/**
- * The ratio for filmstrip self view on mobile portrait mode.
- *
- * @type {number}
- */
-export const MOBILE_FILMSTRIP_PORTRAIT_RATIO = 2.5;
-
 /**
  * The margin for each side of the tile view. Taken away from the available
  * height and width for the tile container to display in.