diff --git a/src/common/MetaItem/MetaItem.js b/src/common/MetaItem/MetaItem.js
index b95c86c07..f43819f5b 100644
--- a/src/common/MetaItem/MetaItem.js
+++ b/src/common/MetaItem/MetaItem.js
@@ -38,7 +38,7 @@ const MetaItem = React.memo(({ className, id, type, name, posterShape = 'square'
         event.nativeEvent.selectItemPrevented = true;
     }, [menuOptionOnSelect]);
     return (
-        <Button className={classnames(className, styles['meta-item-container'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} title={name} data-id={id} onClick={metaItemOnClick}>
+        <Button className={classnames(className, styles['meta-item-container'], styles['poster-shape-poster'], styles[`poster-shape-${posterShape}`], { 'active': menuOpen })} title={name} data-id={id} onClick={metaItemOnClick}>
             <div className={styles['poster-image-container']}>
                 <div className={styles['placeholder-image-layer']}>
                     <Icon
diff --git a/src/common/MetaItem/styles.less b/src/common/MetaItem/styles.less
index f5ea3b2a2..4f8c5de9c 100644
--- a/src/common/MetaItem/styles.less
+++ b/src/common/MetaItem/styles.less
@@ -21,6 +21,12 @@
         }
     }
 
+    &.poster-shape-poster {
+        .poster-image-container {
+            padding-top: calc(100% * var(--poster-shape-ratio));
+        }
+    }
+
     &.poster-shape-square {
         .poster-image-container {
             padding-top: 100%;
@@ -33,12 +39,6 @@
         }
     }
 
-    &.poster-shape-poster {
-        .poster-image-container {
-            padding-top: calc(100% * var(--poster-shape-ratio));
-        }
-    }
-
     .poster-image-container {
         position: relative;
         z-index: -1;