From e1639d35a20a84a3e22781dbe2a8326840db0e2e Mon Sep 17 00:00:00 2001
From: Mark McDowall <mark@mcdowall.ca>
Date: Thu, 9 Apr 2020 22:58:08 -0700
Subject: [PATCH] Fixed: Series toolbar button collapsing

---
 .../Components/Page/Toolbar/PageToolbarSection.css    |  2 +-
 .../src/Components/Page/Toolbar/PageToolbarSection.js | 11 +++++------
 frontend/src/Series/Index/SeriesIndex.js              |  5 +----
 frontend/src/Series/SeriesStatus.js                   |  2 +-
 4 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/frontend/src/Components/Page/Toolbar/PageToolbarSection.css b/frontend/src/Components/Page/Toolbar/PageToolbarSection.css
index 110675b99..9ae8de377 100644
--- a/frontend/src/Components/Page/Toolbar/PageToolbarSection.css
+++ b/frontend/src/Components/Page/Toolbar/PageToolbarSection.css
@@ -1,6 +1,6 @@
 .sectionContainer {
   display: flex;
-  flex: 1 1 10%;
+  flex: 1 1 auto;
   overflow: hidden;
 }
 
diff --git a/frontend/src/Components/Page/Toolbar/PageToolbarSection.js b/frontend/src/Components/Page/Toolbar/PageToolbarSection.js
index 35ee586ec..2e3d291fe 100644
--- a/frontend/src/Components/Page/Toolbar/PageToolbarSection.js
+++ b/frontend/src/Components/Page/Toolbar/PageToolbarSection.js
@@ -15,7 +15,6 @@ import styles from './PageToolbarSection.css';
 const BUTTON_WIDTH = parseInt(dimensions.toolbarButtonWidth);
 const SEPARATOR_MARGIN = parseInt(dimensions.toolbarSeparatorMargin);
 const SEPARATOR_WIDTH = 2 * SEPARATOR_MARGIN + 1;
-const SEPARATOR_NAME = 'PageToolbarSeparator';
 
 function calculateOverflowItems(children, isMeasured, width, collapseButtons) {
   let buttonCount = 0;
@@ -23,9 +22,7 @@ function calculateOverflowItems(children, isMeasured, width, collapseButtons) {
   const validChildren = [];
 
   forEach(children, (child) => {
-    const name = child.type.name;
-
-    if (name === SEPARATOR_NAME) {
+    if (Object.keys(child.props).length === 0) {
       separatorCount++;
     } else {
       buttonCount++;
@@ -68,12 +65,14 @@ function calculateOverflowItems(children, isMeasured, width, collapseButtons) {
   }
 
   validChildren.forEach((child, index) => {
+    const isSeparator = Object.keys(child.props).length === 0;
+
     if (actualButtons < maxButtons) {
-      if (child.type.name !== SEPARATOR_NAME) {
+      if (!isSeparator) {
         buttons.push(child);
         actualButtons++;
       }
-    } else if (child.type.name !== SEPARATOR_NAME) {
+    } else if (!isSeparator) {
       overflowItems.push(child.props);
     }
   });
diff --git a/frontend/src/Series/Index/SeriesIndex.js b/frontend/src/Series/Index/SeriesIndex.js
index 64417c465..7f16c33a1 100644
--- a/frontend/src/Series/Index/SeriesIndex.js
+++ b/frontend/src/Series/Index/SeriesIndex.js
@@ -255,10 +255,7 @@ class SeriesIndex extends Component {
                 null
             }
 
-            {
-              (view === 'posters' || view === 'overview') &&
-                <PageToolbarSeparator />
-            }
+            <PageToolbarSeparator />
 
             <SeriesIndexViewMenu
               view={view}
diff --git a/frontend/src/Series/SeriesStatus.js b/frontend/src/Series/SeriesStatus.js
index faa03ae47..53dba8302 100644
--- a/frontend/src/Series/SeriesStatus.js
+++ b/frontend/src/Series/SeriesStatus.js
@@ -19,7 +19,7 @@ export function getSeriesStatusDetails(status) {
     statusDetails = {
       icon: icons.SERIES_ENDED,
       title: 'Ended',
-      message: 'No additional episodes or or another season is expected'
+      message: 'No additional episodes or seasons are expected'
     };
   } else if (status === 'upcoming') {
     statusDetails = {