From d2949b31abfe97d86e6ae9684acfa4c4297941cb Mon Sep 17 00:00:00 2001
From: nitsua <austin.w.best@gmail.com>
Date: Wed, 29 Jul 2020 22:01:58 -0400
Subject: [PATCH] Fixed: Issue with containers not matching posters on
 cast/crew tabs (#4656)

#4652
---
 .../Details/Credits/Cast/MovieCastPoster.js   | 10 ++-
 .../Details/Credits/Crew/MovieCrewPoster.js   | 10 ++-
 .../Movie/Index/Posters/MovieIndexPoster.css  | 64 ++++++++++---------
 3 files changed, 51 insertions(+), 33 deletions(-)

diff --git a/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js b/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js
index 5c0c15702..7f278900e 100644
--- a/frontend/src/Movie/Details/Credits/Cast/MovieCastPoster.js
+++ b/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
diff --git a/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js b/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js
index 137d98b1b..e570084cb 100644
--- a/frontend/src/Movie/Details/Credits/Crew/MovieCrewPoster.js
+++ b/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
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.css b/frontend/src/Movie/Index/Posters/MovieIndexPoster.css
index ea00e0bb3..8bba6a1d2 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.css
+++ b/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;
+}