From d369d856995064e533982e975f8b5e0fadfa30a2 Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Wed, 15 Apr 2020 09:14:05 -0700
Subject: [PATCH] Fixed: Ended overlay on series posters

---
 .../Series/Index/Posters/SeriesIndexPosters.css   |  4 ----
 .../Series/Index/Posters/SeriesIndexPosters.js    | 15 +++++++++------
 frontend/src/Styles/Variables/dimensions.js       |  4 ++--
 3 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosters.css b/frontend/src/Series/Index/Posters/SeriesIndexPosters.css
index d80f951a0..9c6520fb5 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPosters.css
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPosters.css
@@ -1,7 +1,3 @@
 .grid {
   flex: 1 0 auto;
 }
-
-.container {
-  padding: 10px;
-}
diff --git a/frontend/src/Series/Index/Posters/SeriesIndexPosters.js b/frontend/src/Series/Index/Posters/SeriesIndexPosters.js
index a25914743..44201f56c 100644
--- a/frontend/src/Series/Index/Posters/SeriesIndexPosters.js
+++ b/frontend/src/Series/Index/Posters/SeriesIndexPosters.js
@@ -106,6 +106,7 @@ class SeriesIndexPosters extends Component {
 
     this._isInitialized = false;
     this._grid = null;
+    this._padding = props.isSmallScreen ? columnPaddingSmallScreen : columnPadding;
   }
 
   componentDidUpdate(prevProps, prevState) {
@@ -113,7 +114,8 @@ class SeriesIndexPosters extends Component {
       items,
       sortKey,
       posterOptions,
-      jumpToCharacter
+      jumpToCharacter,
+      isSmallScreen
     } = this.props;
 
     const {
@@ -125,7 +127,7 @@ class SeriesIndexPosters extends Component {
 
     if (prevProps.sortKey !== sortKey ||
         prevProps.posterOptions !== posterOptions) {
-      this.calculateGrid();
+      this.calculateGrid(width, isSmallScreen);
     }
 
     if (this._grid &&
@@ -165,10 +167,9 @@ class SeriesIndexPosters extends Component {
       posterOptions
     } = this.props;
 
-    const padding = isSmallScreen ? columnPaddingSmallScreen : columnPadding;
     const columnWidth = calculateColumnWidth(width, posterOptions.size, isSmallScreen);
     const columnCount = Math.max(Math.floor(width / columnWidth), 1);
-    const posterWidth = columnWidth - padding;
+    const posterWidth = columnWidth - this._padding * 2;
     const posterHeight = calculatePosterHeight(posterWidth);
     const rowHeight = calculateRowHeight(posterHeight, sortKey, isSmallScreen, posterOptions);
 
@@ -213,9 +214,11 @@ class SeriesIndexPosters extends Component {
 
     return (
       <div
-        className={styles.container}
         key={key}
-        style={style}
+        style={{
+          ...style,
+          padding: this._padding
+        }}
       >
         <SeriesIndexItemConnector
           key={series.id}
diff --git a/frontend/src/Styles/Variables/dimensions.js b/frontend/src/Styles/Variables/dimensions.js
index 83f9e9d4e..1e9280640 100644
--- a/frontend/src/Styles/Variables/dimensions.js
+++ b/frontend/src/Styles/Variables/dimensions.js
@@ -47,7 +47,7 @@ module.exports = {
   modalBodyPadding: '30px',
 
   // Series
-  seriesIndexColumnPadding: '20px',
-  seriesIndexColumnPaddingSmallScreen: '10px',
+  seriesIndexColumnPadding: '10px',
+  seriesIndexColumnPaddingSmallScreen: '5px',
   seriesIndexOverviewInfoRowHeight: '21px'
 };