From 874b1bd17ce23b4f0284be59ad8029d89e54236b Mon Sep 17 00:00:00 2001
From: Qstick <qstick@gmail.com>
Date: Mon, 25 May 2020 00:22:33 -0400
Subject: [PATCH] Fixed: Rotating mobile device when modal is open won't reset
 modal

Co-Authored-By: Mark McDowall <markus101@users.noreply.github.com>
---
 frontend/src/Activity/Blacklist/Blacklist.js    |  6 +++---
 frontend/src/Activity/History/History.js        |  6 +++---
 frontend/src/Activity/Queue/Queue.js            |  6 +++---
 .../src/AddMovie/AddListMovie/AddListMovie.js   |  6 +++---
 .../src/AddMovie/AddNewMovie/AddNewMovie.js     |  6 +++---
 .../AddMovie/ImportMovie/Import/ImportMovie.js  |  6 +++---
 .../SelectFolder/ImportMovieSelectFolder.js     |  6 +++---
 frontend/src/Calendar/CalendarPage.js           |  6 +++---
 frontend/src/Components/Page/PageContentBody.js | 14 +++++++++++---
 .../Components/Page/PageContentBodyConnector.js | 17 -----------------
 .../src/Components/Page/PageContentError.js     |  6 +++---
 frontend/src/Movie/Details/MovieDetails.js      |  6 +++---
 .../Movie/Details/MovieDetailsPageConnector.js  |  6 +++---
 frontend/src/Movie/Index/MovieIndex.js          |  6 +++---
 .../CustomFormatSettingsConnector.js            |  6 +++---
 .../DownloadClients/DownloadClientSettings.js   |  6 +++---
 .../src/Settings/General/GeneralSettings.js     |  6 +++---
 .../src/Settings/Indexers/IndexerSettings.js    |  6 +++---
 .../Settings/MediaManagement/MediaManagement.js |  6 +++---
 .../src/Settings/Metadata/MetadataSettings.js   |  6 +++---
 .../src/Settings/NetImport/NetImportSettings.js |  6 +++---
 .../Notifications/NotificationSettings.js       |  6 +++---
 frontend/src/Settings/Profiles/Profiles.js      |  6 +++---
 frontend/src/Settings/Quality/Quality.js        |  6 +++---
 frontend/src/Settings/Settings.js               |  6 +++---
 frontend/src/Settings/Tags/TagSettings.js       |  6 +++---
 frontend/src/Settings/UI/UISettings.js          |  6 +++---
 frontend/src/System/Backup/Backups.js           |  6 +++---
 frontend/src/System/Events/LogsTable.js         |  6 +++---
 frontend/src/System/Logs/Files/LogFiles.js      |  6 +++---
 frontend/src/System/Status/Status.js            |  6 +++---
 frontend/src/System/Tasks/Tasks.js              |  6 +++---
 frontend/src/System/Updates/Updates.js          |  6 +++---
 33 files changed, 104 insertions(+), 113 deletions(-)
 delete mode 100644 frontend/src/Components/Page/PageContentBodyConnector.js

diff --git a/frontend/src/Activity/Blacklist/Blacklist.js b/frontend/src/Activity/Blacklist/Blacklist.js
index d93bec0bf..2d0a1e9f4 100644
--- a/frontend/src/Activity/Blacklist/Blacklist.js
+++ b/frontend/src/Activity/Blacklist/Blacklist.js
@@ -7,7 +7,7 @@ import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
@@ -56,7 +56,7 @@ class Blacklist extends Component {
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isFetching && !isPopulated &&
               <LoadingIndicator />
@@ -103,7 +103,7 @@ class Blacklist extends Component {
                 />
               </div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/Activity/History/History.js b/frontend/src/Activity/History/History.js
index 123cb1e30..47d87fb2e 100644
--- a/frontend/src/Activity/History/History.js
+++ b/frontend/src/Activity/History/History.js
@@ -7,7 +7,7 @@ import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
@@ -74,7 +74,7 @@ class History extends Component {
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isFetchingAny && !isAllPopulated &&
               <LoadingIndicator />
@@ -125,7 +125,7 @@ class History extends Component {
                 />
               </div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/Activity/Queue/Queue.js b/frontend/src/Activity/Queue/Queue.js
index f431f1102..d25f51ed6 100644
--- a/frontend/src/Activity/Queue/Queue.js
+++ b/frontend/src/Activity/Queue/Queue.js
@@ -13,7 +13,7 @@ import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import TablePager from 'Components/Table/TablePager';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
@@ -193,7 +193,7 @@ class Queue extends Component {
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isRefreshing && !isAllPopulated &&
               <LoadingIndicator />
@@ -250,7 +250,7 @@ class Queue extends Component {
                 />
               </div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
 
         <RemoveQueueItemsModal
           isOpen={isConfirmRemoveModalOpen}
diff --git a/frontend/src/AddMovie/AddListMovie/AddListMovie.js b/frontend/src/AddMovie/AddListMovie/AddListMovie.js
index 1ca915f63..4a4aaa013 100644
--- a/frontend/src/AddMovie/AddListMovie/AddListMovie.js
+++ b/frontend/src/AddMovie/AddListMovie/AddListMovie.js
@@ -5,7 +5,7 @@ import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItems';
 import { align, icons, sortDirections } from 'Helpers/Props';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageJumpBar from 'Components/Page/PageJumpBar';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
@@ -259,7 +259,7 @@ class AddListMovie extends Component {
         </PageToolbar>
 
         <div className={styles.pageContentBodyWrapper}>
-          <PageContentBodyConnector
+          <PageContentBody
             registerScroller={this.setScrollerRef}
             className={styles.contentBody}
             innerClassName={styles[`${view}InnerContentBody`]}
@@ -296,7 +296,7 @@ class AddListMovie extends Component {
                   <div className={styles.noResults}>Couldn't find any results</div>
                 </div>
             }
-          </PageContentBodyConnector>
+          </PageContentBody>
 
           {
             isLoaded && !!jumpBarItems.order.length &&
diff --git a/frontend/src/AddMovie/AddNewMovie/AddNewMovie.js b/frontend/src/AddMovie/AddNewMovie/AddNewMovie.js
index 52a7a3eda..9ced2e869 100644
--- a/frontend/src/AddMovie/AddNewMovie/AddNewMovie.js
+++ b/frontend/src/AddMovie/AddNewMovie/AddNewMovie.js
@@ -8,7 +8,7 @@ import Icon from 'Components/Icon';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import TextInput from 'Components/Form/TextInput';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import AddNewMovieSearchResultConnector from './AddNewMovieSearchResultConnector';
 import styles from './AddNewMovie.css';
 
@@ -88,7 +88,7 @@ class AddNewMovie extends Component {
 
     return (
       <PageContent title="Add New Movie">
-        <PageContentBodyConnector>
+        <PageContentBody>
           <div className={styles.searchContainer}>
             <div className={styles.searchIconContainer}>
               <Icon
@@ -191,7 +191,7 @@ class AddNewMovie extends Component {
           }
 
           <div />
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/AddMovie/ImportMovie/Import/ImportMovie.js b/frontend/src/AddMovie/ImportMovie/Import/ImportMovie.js
index 0893172e3..3a3889ab7 100644
--- a/frontend/src/AddMovie/ImportMovie/Import/ImportMovie.js
+++ b/frontend/src/AddMovie/ImportMovie/Import/ImportMovie.js
@@ -5,7 +5,7 @@ import selectAll from 'Utilities/Table/selectAll';
 import toggleSelected from 'Utilities/Table/toggleSelected';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import ImportMovieTableConnector from './ImportMovieTableConnector';
 import ImportMovieFooterConnector from './ImportMovieFooterConnector';
 
@@ -93,7 +93,7 @@ class ImportMovie extends Component {
 
     return (
       <PageContent title="Import Movies">
-        <PageContentBodyConnector
+        <PageContentBody
           registerScroller={this.setScrollerRef}
           onScroll={this.onScroll}
         >
@@ -128,7 +128,7 @@ class ImportMovie extends Component {
                 onRemoveSelectedStateItem={this.onRemoveSelectedStateItem}
               />
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
 
         {
           !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length &&
diff --git a/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js b/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js
index 43312b970..f7abd3baa 100644
--- a/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js
+++ b/frontend/src/AddMovie/ImportMovie/SelectFolder/ImportMovieSelectFolder.js
@@ -7,7 +7,7 @@ import Icon from 'Components/Icon';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FileBrowserModal from 'Components/FileBrowser/FileBrowserModal';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import ImportMovieRootFolderRowConnector from './ImportMovieRootFolderRowConnector';
@@ -77,7 +77,7 @@ class ImportMovieSelectFolder extends Component {
 
     return (
       <PageContent title="Import Movies">
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isFetching && !isPopulated &&
               <LoadingIndicator />
@@ -169,7 +169,7 @@ class ImportMovieSelectFolder extends Component {
                 />
               </div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/Calendar/CalendarPage.js b/frontend/src/Calendar/CalendarPage.js
index a79a89952..ed05588bc 100644
--- a/frontend/src/Calendar/CalendarPage.js
+++ b/frontend/src/Calendar/CalendarPage.js
@@ -4,7 +4,7 @@ import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import { align, icons } from 'Helpers/Props';
 import PageContent from 'Components/Page/PageContent';
 import Measure from 'Components/Measure';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
@@ -140,7 +140,7 @@ class CalendarPage extends Component {
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector
+        <PageContentBody
           className={styles.calendarPageBody}
           innerClassName={styles.calendarInnerPageBody}
         >
@@ -171,7 +171,7 @@ class CalendarPage extends Component {
             hasMovie && !movieError &&
               <LegendConnector />
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
 
         <CalendarLinkModal
           isOpen={isCalendarLinkModalOpen}
diff --git a/frontend/src/Components/Page/PageContentBody.js b/frontend/src/Components/Page/PageContentBody.js
index 5c277d8f5..7f4b3a171 100644
--- a/frontend/src/Components/Page/PageContentBody.js
+++ b/frontend/src/Components/Page/PageContentBody.js
@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
+import { isMobile as isMobileUtil } from 'Utilities/mobile';
 import { isLocked } from 'Utilities/scrollLock';
 import { scrollDirections } from 'Helpers/Props';
 import OverlayScroller from 'Components/Scroller/OverlayScroller';
@@ -8,6 +9,15 @@ import styles from './PageContentBody.css';
 
 class PageContentBody extends Component {
 
+  //
+  // Lifecycle
+
+  constructor(props, context) {
+    super(props, context);
+
+    this._isMobile = isMobileUtil();
+  }
+
   //
   // Listeners
 
@@ -26,13 +36,12 @@ class PageContentBody extends Component {
     const {
       className,
       innerClassName,
-      isSmallScreen,
       children,
       dispatch,
       ...otherProps
     } = this.props;
 
-    const ScrollerComponent = isSmallScreen ? Scroller : OverlayScroller;
+    const ScrollerComponent = this._isMobile ? Scroller : OverlayScroller;
 
     return (
       <ScrollerComponent
@@ -52,7 +61,6 @@ class PageContentBody extends Component {
 PageContentBody.propTypes = {
   className: PropTypes.string,
   innerClassName: PropTypes.string,
-  isSmallScreen: PropTypes.bool.isRequired,
   children: PropTypes.node.isRequired,
   onScroll: PropTypes.func,
   dispatch: PropTypes.func
diff --git a/frontend/src/Components/Page/PageContentBodyConnector.js b/frontend/src/Components/Page/PageContentBodyConnector.js
deleted file mode 100644
index e864ea7eb..000000000
--- a/frontend/src/Components/Page/PageContentBodyConnector.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector';
-import PageContentBody from './PageContentBody';
-
-function createMapStateToProps() {
-  return createSelector(
-    createDimensionsSelector(),
-    (dimensions) => {
-      return {
-        isSmallScreen: dimensions.isSmallScreen
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps, null, null, { forwardRef: true })(PageContentBody);
diff --git a/frontend/src/Components/Page/PageContentError.js b/frontend/src/Components/Page/PageContentError.js
index 5ae41a936..9a76f2ee3 100644
--- a/frontend/src/Components/Page/PageContentError.js
+++ b/frontend/src/Components/Page/PageContentError.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import ErrorBoundaryError from 'Components/Error/ErrorBoundaryError';
-import PageContentBodyConnector from './PageContentBodyConnector';
+import PageContentBody from './PageContentBody';
 import styles from './PageContentError.css';
 
 function PageContentError(props) {
   return (
     <div className={styles.content}>
-      <PageContentBodyConnector>
+      <PageContentBody>
         <ErrorBoundaryError
           {...props}
           message='There was an error loading this page'
         />
-      </PageContentBodyConnector>
+      </PageContentBody>
     </div>
   );
 }
diff --git a/frontend/src/Movie/Details/MovieDetails.js b/frontend/src/Movie/Details/MovieDetails.js
index b7fa0fef3..a8bbc1d8d 100644
--- a/frontend/src/Movie/Details/MovieDetails.js
+++ b/frontend/src/Movie/Details/MovieDetails.js
@@ -17,7 +17,7 @@ import Measure from 'Components/Measure';
 import MonitorToggleButton from 'Components/MonitorToggleButton';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
@@ -255,7 +255,7 @@ class MovieDetails extends Component {
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector innerClassName={styles.innerContentBody}>
+        <PageContentBody innerClassName={styles.innerContentBody}>
           <div className={styles.header}>
             <div
               className={styles.backdrop}
@@ -614,7 +614,7 @@ class MovieDetails extends Component {
             showImportMode={false}
             onModalClose={this.onInteractiveImportModalClose}
           />
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/Movie/Details/MovieDetailsPageConnector.js b/frontend/src/Movie/Details/MovieDetailsPageConnector.js
index 97250ab88..26a5564ad 100644
--- a/frontend/src/Movie/Details/MovieDetailsPageConnector.js
+++ b/frontend/src/Movie/Details/MovieDetailsPageConnector.js
@@ -6,7 +6,7 @@ import { createSelector } from 'reselect';
 import { push } from 'connected-react-router';
 import getErrorMessage from 'Utilities/Object/getErrorMessage';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import NotFound from 'Components/NotFound';
 import MovieDetailsConnector from './MovieDetailsConnector';
@@ -74,9 +74,9 @@ class MovieDetailsPageConnector extends Component {
     if (isFetching && !isPopulated) {
       return (
         <PageContent title='loading'>
-          <PageContentBodyConnector>
+          <PageContentBody>
             <LoadingIndicator />
-          </PageContentBodyConnector>
+          </PageContentBody>
         </PageContent>
       );
     }
diff --git a/frontend/src/Movie/Index/MovieIndex.js b/frontend/src/Movie/Index/MovieIndex.js
index 82b96489e..a9310f0d5 100644
--- a/frontend/src/Movie/Index/MovieIndex.js
+++ b/frontend/src/Movie/Index/MovieIndex.js
@@ -9,7 +9,7 @@ import toggleSelected from 'Utilities/Table/toggleSelected';
 import { align, icons, kinds, sortDirections } from 'Helpers/Props';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageJumpBar from 'Components/Page/PageJumpBar';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
@@ -476,7 +476,7 @@ class MovieIndex extends Component {
         </PageToolbar>
 
         <div className={styles.pageContentBodyWrapper}>
-          <PageContentBodyConnector
+          <PageContentBody
             registerScroller={this.setScrollerRef}
             className={styles.contentBody}
             innerClassName={styles[`${view}InnerContentBody`]}
@@ -524,7 +524,7 @@ class MovieIndex extends Component {
               !error && isPopulated && !items.length &&
                 <NoMovie totalItems={totalItems} />
             }
-          </PageContentBodyConnector>
+          </PageContentBody>
 
           {
             isLoaded && !!jumpBarItems.order.length &&
diff --git a/frontend/src/Settings/CustomFormats/CustomFormatSettingsConnector.js b/frontend/src/Settings/CustomFormats/CustomFormatSettingsConnector.js
index bf165b3e7..b2968a686 100644
--- a/frontend/src/Settings/CustomFormats/CustomFormatSettingsConnector.js
+++ b/frontend/src/Settings/CustomFormats/CustomFormatSettingsConnector.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import CustomFormatsConnector from './CustomFormats/CustomFormatsConnector';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 
@@ -18,11 +18,11 @@ class CustomFormatSettingsConnector extends Component {
           showSave={false}
         />
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           <DndProvider backend={HTML5Backend}>
             <CustomFormatsConnector />
           </DndProvider>
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/Settings/DownloadClients/DownloadClientSettings.js b/frontend/src/Settings/DownloadClients/DownloadClientSettings.js
index c82604a88..a9124db41 100644
--- a/frontend/src/Settings/DownloadClients/DownloadClientSettings.js
+++ b/frontend/src/Settings/DownloadClients/DownloadClientSettings.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
 import { icons } from 'Helpers/Props';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
@@ -77,7 +77,7 @@ class DownloadClientSettings extends Component {
           onSavePress={this.onSavePress}
         />
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           <DownloadClientsConnector />
 
           <DownloadClientOptionsConnector
@@ -86,7 +86,7 @@ class DownloadClientSettings extends Component {
           />
 
           <RemotePathMappingsConnector />
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/Settings/General/GeneralSettings.js b/frontend/src/Settings/General/GeneralSettings.js
index 780ebe4e7..235316129 100644
--- a/frontend/src/Settings/General/GeneralSettings.js
+++ b/frontend/src/Settings/General/GeneralSettings.js
@@ -4,7 +4,7 @@ import React, { Component } from 'react';
 import { kinds } from 'Helpers/Props';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import Form from 'Components/Form/Form';
 import ConfirmModal from 'Components/Modal/ConfirmModal';
@@ -117,7 +117,7 @@ class GeneralSettings extends Component {
           {...otherProps}
         />
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isFetching && !isPopulated &&
               <LoadingIndicator />
@@ -179,7 +179,7 @@ class GeneralSettings extends Component {
                 />
               </Form>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
 
         <ConfirmModal
           isOpen={this.state.isRestartRequiredModalOpen}
diff --git a/frontend/src/Settings/Indexers/IndexerSettings.js b/frontend/src/Settings/Indexers/IndexerSettings.js
index 161224999..9650b9471 100644
--- a/frontend/src/Settings/Indexers/IndexerSettings.js
+++ b/frontend/src/Settings/Indexers/IndexerSettings.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
 import { icons } from 'Helpers/Props';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
@@ -77,7 +77,7 @@ class IndexerSettings extends Component {
           onSavePress={this.onSavePress}
         />
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           <IndexersConnector />
 
           <IndexerOptionsConnector
@@ -86,7 +86,7 @@ class IndexerSettings extends Component {
           />
 
           <RestrictionsConnector />
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/Settings/MediaManagement/MediaManagement.js b/frontend/src/Settings/MediaManagement/MediaManagement.js
index a52082635..3c6209773 100644
--- a/frontend/src/Settings/MediaManagement/MediaManagement.js
+++ b/frontend/src/Settings/MediaManagement/MediaManagement.js
@@ -4,7 +4,7 @@ import { inputTypes, sizes } from 'Helpers/Props';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FieldSet from 'Components/FieldSet';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
@@ -52,7 +52,7 @@ class MediaManagement extends Component {
           onSavePress={onSavePress}
         />
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           <NamingConnector />
 
           {
@@ -411,7 +411,7 @@ class MediaManagement extends Component {
             <RootFoldersConnector />
             <AddRootFolderConnector />
           </FieldSet>
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/Settings/Metadata/MetadataSettings.js b/frontend/src/Settings/Metadata/MetadataSettings.js
index c51a31e7f..1e911d08d 100644
--- a/frontend/src/Settings/Metadata/MetadataSettings.js
+++ b/frontend/src/Settings/Metadata/MetadataSettings.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import MetadatasConnector from './Metadata/MetadatasConnector';
 import MetadataOptionsConnector from './Options/MetadataOptionsConnector';
@@ -52,14 +52,14 @@ class MetadataSettings extends Component {
           onSavePress={this.onSavePress}
         />
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           <MetadataOptionsConnector
             onChildMounted={this.onChildMounted}
             onChildStateChange={this.onChildStateChange}
           />
 
           <MetadatasConnector />
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/Settings/NetImport/NetImportSettings.js b/frontend/src/Settings/NetImport/NetImportSettings.js
index eb614d68c..86f20f6f4 100644
--- a/frontend/src/Settings/NetImport/NetImportSettings.js
+++ b/frontend/src/Settings/NetImport/NetImportSettings.js
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { Component, Fragment } from 'react';
 import { icons } from 'Helpers/Props';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
@@ -77,7 +77,7 @@ class NetImportSettings extends Component {
           onSavePress={this.onSavePress}
         />
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           <NetImportsConnector />
 
           <NetImportOptionsConnector
@@ -87,7 +87,7 @@ class NetImportSettings extends Component {
 
           <NetImportExclusionsConnector />
 
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/Settings/Notifications/NotificationSettings.js b/frontend/src/Settings/Notifications/NotificationSettings.js
index c9bed6501..1271238bb 100644
--- a/frontend/src/Settings/Notifications/NotificationSettings.js
+++ b/frontend/src/Settings/Notifications/NotificationSettings.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import NotificationsConnector from './Notifications/NotificationsConnector';
 
@@ -11,9 +11,9 @@ function NotificationSettings() {
         showSave={false}
       />
 
-      <PageContentBodyConnector>
+      <PageContentBody>
         <NotificationsConnector />
-      </PageContentBodyConnector>
+      </PageContentBody>
     </PageContent>
   );
 }
diff --git a/frontend/src/Settings/Profiles/Profiles.js b/frontend/src/Settings/Profiles/Profiles.js
index e097ef4a5..41cd465f7 100644
--- a/frontend/src/Settings/Profiles/Profiles.js
+++ b/frontend/src/Settings/Profiles/Profiles.js
@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import Link from 'Components/Link/Link';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import QualityProfilesConnector from './Quality/QualityProfilesConnector';
@@ -23,7 +23,7 @@ class Profiles extends Component {
           showSave={false}
         />
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           <DndProvider backend={HTML5Backend}>
             <QualityProfilesConnector />
             <DelayProfilesConnector />
@@ -33,7 +33,7 @@ class Profiles extends Component {
               instead.
             </div>
           </DndProvider>
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/Settings/Quality/Quality.js b/frontend/src/Settings/Quality/Quality.js
index dfd6a24d7..ce7c34952 100644
--- a/frontend/src/Settings/Quality/Quality.js
+++ b/frontend/src/Settings/Quality/Quality.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import QualityDefinitionsConnector from './Definition/QualityDefinitionsConnector';
 
@@ -54,12 +54,12 @@ class Quality extends Component {
           onSavePress={this.onSavePress}
         />
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           <QualityDefinitionsConnector
             onChildMounted={this.onChildMounted}
             onChildStateChange={this.onChildStateChange}
           />
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/Settings/Settings.js b/frontend/src/Settings/Settings.js
index bfaa7d163..303f71e06 100644
--- a/frontend/src/Settings/Settings.js
+++ b/frontend/src/Settings/Settings.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import Link from 'Components/Link/Link';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import SettingsToolbarConnector from './SettingsToolbarConnector';
 import styles from './Settings.css';
 
@@ -12,7 +12,7 @@ function Settings() {
         hasPendingChanges={false}
       />
 
-      <PageContentBodyConnector>
+      <PageContentBody>
         <Link
           className={styles.link}
           to="/settings/mediamanagement"
@@ -144,7 +144,7 @@ function Settings() {
         <div className={styles.summary}>
           Calendar, date and color impaired options
         </div>
-      </PageContentBodyConnector>
+      </PageContentBody>
     </PageContent>
   );
 }
diff --git a/frontend/src/Settings/Tags/TagSettings.js b/frontend/src/Settings/Tags/TagSettings.js
index 56ef92b49..786b4b40b 100644
--- a/frontend/src/Settings/Tags/TagSettings.js
+++ b/frontend/src/Settings/Tags/TagSettings.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import TagsConnector from './TagsConnector';
 
@@ -11,9 +11,9 @@ function TagSettings() {
         showSave={false}
       />
 
-      <PageContentBodyConnector>
+      <PageContentBody>
         <TagsConnector />
-      </PageContentBodyConnector>
+      </PageContentBody>
     </PageContent>
   );
 }
diff --git a/frontend/src/Settings/UI/UISettings.js b/frontend/src/Settings/UI/UISettings.js
index 0e409d464..bef36cfd4 100644
--- a/frontend/src/Settings/UI/UISettings.js
+++ b/frontend/src/Settings/UI/UISettings.js
@@ -4,7 +4,7 @@ import { inputTypes } from 'Helpers/Props';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import FieldSet from 'Components/FieldSet';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
@@ -65,7 +65,7 @@ class UISettings extends Component {
           onSavePress={onSavePress}
         />
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isFetching &&
               <LoadingIndicator />
@@ -176,7 +176,7 @@ class UISettings extends Component {
                 </FieldSet>
               </Form>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/System/Backup/Backups.js b/frontend/src/System/Backup/Backups.js
index 97167e6f2..424f8740b 100644
--- a/frontend/src/System/Backup/Backups.js
+++ b/frontend/src/System/Backup/Backups.js
@@ -5,7 +5,7 @@ import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import TableBody from 'Components/Table/TableBody';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
@@ -93,7 +93,7 @@ class Backups extends Component {
           </PageToolbarSection>
         </PageToolbar>
 
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             isFetching && !isPopulated &&
               <LoadingIndicator />
@@ -141,7 +141,7 @@ class Backups extends Component {
                 </TableBody>
               </Table>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
 
         <RestoreBackupModalConnector
           isOpen={this.state.isRestoreModalOpen}
diff --git a/frontend/src/System/Events/LogsTable.js b/frontend/src/System/Events/LogsTable.js
index 41b0f3ebf..f561545c3 100644
--- a/frontend/src/System/Events/LogsTable.js
+++ b/frontend/src/System/Events/LogsTable.js
@@ -7,7 +7,7 @@ import TableBody from 'Components/Table/TableBody';
 import TableOptionsModalWrapper from 'Components/Table/TableOptions/TableOptionsModalWrapper';
 import TablePager from 'Components/Table/TablePager';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarButton from 'Components/Page/Toolbar/PageToolbarButton';
@@ -73,7 +73,7 @@ function LogsTable(props) {
         </PageToolbarSection>
       </PageToolbar>
 
-      <PageContentBodyConnector>
+      <PageContentBody>
         {
           isFetching && !isPopulated &&
             <LoadingIndicator />
@@ -116,7 +116,7 @@ function LogsTable(props) {
               />
             </div>
         }
-      </PageContentBodyConnector>
+      </PageContentBody>
     </PageContent>
   );
 }
diff --git a/frontend/src/System/Logs/Files/LogFiles.js b/frontend/src/System/Logs/Files/LogFiles.js
index 47482b3fe..e79cd91a3 100644
--- a/frontend/src/System/Logs/Files/LogFiles.js
+++ b/frontend/src/System/Logs/Files/LogFiles.js
@@ -6,7 +6,7 @@ import Link from 'Components/Link/Link';
 import LoadingIndicator from 'Components/Loading/LoadingIndicator';
 import Table from 'Components/Table/Table';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
@@ -73,7 +73,7 @@ class LogFiles extends Component {
             />
           </PageToolbarSection>
         </PageToolbar>
-        <PageContentBodyConnector>
+        <PageContentBody>
           <Alert>
             <div>
               Log files are located in: {location}
@@ -119,7 +119,7 @@ class LogFiles extends Component {
             !isFetching && !items.length &&
               <div>No log files</div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/System/Status/Status.js b/frontend/src/System/Status/Status.js
index f0b157515..807a7abd5 100644
--- a/frontend/src/System/Status/Status.js
+++ b/frontend/src/System/Status/Status.js
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import HealthConnector from './Health/HealthConnector';
 import DiskSpaceConnector from './DiskSpace/DiskSpaceConnector';
 import AboutConnector from './About/AboutConnector';
@@ -14,12 +14,12 @@ class Status extends Component {
   render() {
     return (
       <PageContent title="Status">
-        <PageContentBodyConnector>
+        <PageContentBody>
           <HealthConnector />
           <DiskSpaceConnector />
           <AboutConnector />
           <MoreInfo />
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }
diff --git a/frontend/src/System/Tasks/Tasks.js b/frontend/src/System/Tasks/Tasks.js
index dbbb4d1bf..4245615ca 100644
--- a/frontend/src/System/Tasks/Tasks.js
+++ b/frontend/src/System/Tasks/Tasks.js
@@ -1,16 +1,16 @@
 import React from 'react';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import ScheduledTasksConnector from './Scheduled/ScheduledTasksConnector';
 import QueuedTasksConnector from './Queued/QueuedTasksConnector';
 
 function Tasks() {
   return (
     <PageContent title="Tasks">
-      <PageContentBodyConnector>
+      <PageContentBody>
         <ScheduledTasksConnector />
         <QueuedTasksConnector />
-      </PageContentBodyConnector>
+      </PageContentBody>
     </PageContent>
   );
 }
diff --git a/frontend/src/System/Updates/Updates.js b/frontend/src/System/Updates/Updates.js
index 7b74896e4..3d09b8508 100644
--- a/frontend/src/System/Updates/Updates.js
+++ b/frontend/src/System/Updates/Updates.js
@@ -9,7 +9,7 @@ import InlineMarkdown from 'Components/Markdown/InlineMarkdown';
 import Icon from 'Components/Icon';
 import Label from 'Components/Label';
 import PageContent from 'Components/Page/PageContent';
-import PageContentBodyConnector from 'Components/Page/PageContentBodyConnector';
+import PageContentBody from 'Components/Page/PageContentBody';
 import UpdateChanges from './UpdateChanges';
 import styles from './Updates.css';
 
@@ -49,7 +49,7 @@ class Updates extends Component {
 
     return (
       <PageContent title="Updates">
-        <PageContentBodyConnector>
+        <PageContentBody>
           {
             !isPopulated && !hasError &&
               <LoadingIndicator />
@@ -198,7 +198,7 @@ class Updates extends Component {
                 Failed to update settings
               </div>
           }
-        </PageContentBodyConnector>
+        </PageContentBody>
       </PageContent>
     );
   }