Fixed: Issue with containers not matching posters on cast/crew tabs (#4656)

#4652

frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js

@@ -71,8 +71,15 @@ class MovieCastPoster extends Component {
       height: `${posterHeight}px`
     };
 
+    const contentStyle = {
+      width: `${posterWidth}px`
+    };
+
     return (
-      <div className={styles.content}>
+      <div
+        className={styles.content}
+        style={contentStyle}
+      >
         <div className={styles.posterContainer}>
           <Label className={styles.controls}>
             {
@@ -93,7 +100,6 @@ class MovieCastPoster extends Component {
           </Label>
 
           <div
-            className={styles.poster}
             style={elementStyle}
           >
             <MovieHeadshot

frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js

@@ -71,8 +71,15 @@ class MovieCrewPoster extends Component {
       height: `${posterHeight}px`
     };
 
+    const contentStyle = {
+      width: `${posterWidth}px`
+    };
+
     return (
-      <div className={styles.content}>
+      <div
+        className={styles.content}
+        style={contentStyle}
+      >
         <div className={styles.posterContainer}>
           <Label className={styles.controls}>
             {
@@ -93,7 +100,6 @@ class MovieCrewPoster extends Component {
           </Label>
 
           <div
-            className={styles.poster}
             style={elementStyle}
           >
             <MovieHeadshot

frontend/src/Movie/Index/Posters/MovieIndexPoster.css

@@ -19,9 +19,7 @@ $hoverScale: 1.05;
   position: relative;
 }
 
-.link {
-  composes: link from '~Components/Link/Link.css';
-
+.poster {
   position: relative;
   display: block;
   background-color: $defaultColor;
@@ -42,12 +40,6 @@ $hoverScale: 1.05;
   font-size: 20px;
 }
 
-.nextAiring {
-  background-color: #fafbfc;
-  text-align: center;
-  font-size: $smallFontSize;
-}
-
 .title {
   @add-mixin truncate;
 
@@ -56,19 +48,6 @@ $hoverScale: 1.05;
   font-size: $smallFontSize;
 }
 
-.ended {
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: 1;
-  width: 0;
-  height: 0;
-  border-width: 0 25px 25px 0;
-  border-style: solid;
-  border-color: transparent $dangerColor transparent transparent;
-  color: $white;
-}
-
 .controls {
   position: absolute;
   bottom: 10px;
@@ -82,13 +61,6 @@ $hoverScale: 1.05;
   transition: opacity 0;
 }
 
-.editorSelect {
-  position: absolute;
-  top: 10px;
-  left: 10px;
-  z-index: 3;
-}
-
 .action {
   composes: button from '~Components/Link/IconButton.css';
 
@@ -103,6 +75,40 @@ $hoverScale: 1.05;
   }
 }
 
+.ended {
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: 1;
+  width: 0;
+  height: 0;
+  border-width: 0 25px 25px 0;
+  border-style: solid;
+  border-color: transparent $dangerColor transparent transparent;
+  color: $white;
+}
+
+.editorSelect {
+  position: absolute;
+  top: 10px;
+  left: 10px;
+  z-index: 3;
+}
+
 .externalLinks {
   margin-left: 0.5em;
 }
+
+.link {
+  composes: link from '~Components/Link/Link.css';
+
+  position: relative;
+  display: block;
+  background-color: $defaultColor;
+}
+
+.nextAiring {
+  background-color: #fafbfc;
+  text-align: center;
+  font-size: $smallFontSize;
+}