Fixed: Rotating mobile device when modal is open won't reset modal

Closes #3333
2020-04-25 11:59:29 -07:00 · 2020-04-25 11:59:29 -07:00 · 5a7dec34cc
parent 9d766cfed5
commit 5a7dec34cc
33 changed files with 104 additions and 113 deletions
--- 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>
    );
  }
--- a/frontend/src/Activity/History/History.js
+++ b/frontend/src/Activity/History/History.js
@ -8,7 +8,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';
@ -96,7 +96,7 @@ class History extends Component {
          </PageToolbarSection>
        </PageToolbar>

-        <PageContentBodyConnector>
+        <PageContentBody>
          {
            isFetchingAny && !isAllPopulated &&
              <LoadingIndicator />
@ -147,7 +147,7 @@ class History extends Component {
                />
              </div>
          }
-        </PageContentBodyConnector>
+        </PageContentBody>
      </PageContent>
    );
  }
--- 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';
@ -191,7 +191,7 @@ class Queue extends Component {
          </PageToolbarSection>
        </PageToolbar>

-        <PageContentBodyConnector>
+        <PageContentBody>
          {
            isRefreshing && !isAllPopulated &&
              <LoadingIndicator />
@ -248,7 +248,7 @@ class Queue extends Component {
                />
              </div>
          }
-        </PageContentBodyConnector>
+        </PageContentBody>

        <RemoveQueueItemsModal
          isOpen={isConfirmRemoveModalOpen}
--- a/frontend/src/AddSeries/AddNewSeries/AddNewSeries.js
+++ b/frontend/src/AddSeries/AddNewSeries/AddNewSeries.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 AddNewSeriesSearchResultConnector from './AddNewSeriesSearchResultConnector';
 import styles from './AddNewSeries.css';

@ -88,7 +88,7 @@ class AddNewSeries extends Component {

    return (
      <PageContent title="Add New Series">
-        <PageContentBodyConnector>
+        <PageContentBody>
          <div className={styles.searchContainer}>
            <div className={styles.searchIconContainer}>
              <Icon
@ -191,7 +191,7 @@ class AddNewSeries extends Component {
          }

          <div />
-        </PageContentBodyConnector>
+        </PageContentBody>
      </PageContent>
    );
  }
--- a/frontend/src/AddSeries/ImportSeries/Import/ImportSeries.js
+++ b/frontend/src/AddSeries/ImportSeries/Import/ImportSeries.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 ImportSeriesTableConnector from './ImportSeriesTableConnector';
 import ImportSeriesFooterConnector from './ImportSeriesFooterConnector';

@ -97,7 +97,7 @@ class ImportSeries extends Component {

    return (
      <PageContent title="Import Series">
-        <PageContentBodyConnector
+        <PageContentBody
          registerScroller={this.setScrollerRef}
          onScroll={this.onScroll}
        >
@ -133,7 +133,7 @@ class ImportSeries extends Component {
                onRemoveSelectedStateItem={this.onRemoveSelectedStateItem}
              />
          }
-        </PageContentBodyConnector>
+        </PageContentBody>

        {
          !rootFoldersError && rootFoldersPopulated && !!unmappedFolders.length &&
--- a/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.js
+++ b/frontend/src/AddSeries/ImportSeries/SelectFolder/ImportSeriesSelectFolder.js
@ -7,7 +7,7 @@ import FieldSet from 'Components/FieldSet';
 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 RootFolders from 'RootFolder/RootFolders';
 import styles from './ImportSeriesSelectFolder.css';

@ -53,7 +53,7 @@ class ImportSeriesSelectFolder extends Component {

    return (
      <PageContent title="Import Series">
-        <PageContentBodyConnector>
+        <PageContentBody>
          {
            isFetching && !isPopulated &&
              <LoadingIndicator />
@ -132,7 +132,7 @@ class ImportSeriesSelectFolder extends Component {
                />
              </div>
          }
-        </PageContentBodyConnector>
+        </PageContentBody>
      </PageContent>
    );
  }
--- a/frontend/src/Calendar/CalendarPage.js
+++ b/frontend/src/Calendar/CalendarPage.js
@ -3,7 +3,7 @@ import React, { Component } from 'react';
 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';
@ -138,7 +138,7 @@ class CalendarPage extends Component {
          </PageToolbarSection>
        </PageToolbar>

-        <PageContentBodyConnector
+        <PageContentBody
          className={styles.calendarPageBody}
          innerClassName={styles.calendarInnerPageBody}
        >
@ -159,7 +159,7 @@ class CalendarPage extends Component {
            hasSeries &&
              <LegendConnector />
          }
-        </PageContentBodyConnector>
+        </PageContentBody>

        <CalendarLinkModal
          isOpen={isCalendarLinkModalOpen}
--- 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
--- a/frontend/src/Components/Page/PageContentBodyConnector.js
+++ b/frontend/src/Components/Page/PageContentBodyConnector.js
@ -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);
--- 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>
  );
 }
--- a/frontend/src/SeasonPass/SeasonPass.js
+++ b/frontend/src/SeasonPass/SeasonPass.js
@ -6,7 +6,7 @@ import toggleSelected from 'Utilities/Table/toggleSelected';
 import { align, 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 PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import FilterMenu from 'Components/Menu/FilterMenu';
@ -137,7 +137,7 @@ class SeasonPass extends Component {
          </PageToolbarSection>
        </PageToolbar>

-        <PageContentBodyConnector>
+        <PageContentBody>
          {
            isFetching && !isPopulated &&
              <LoadingIndicator />
@ -183,7 +183,7 @@ class SeasonPass extends Component {
            !error && isPopulated && !items.length &&
              <NoSeries totalItems={totalItems} />
          }
-        </PageContentBodyConnector>
+        </PageContentBody>

        <SeasonPassFooter
          selectedCount={this.getSelectedIds().length}
--- a/frontend/src/Series/Details/SeriesDetails.js
+++ b/frontend/src/Series/Details/SeriesDetails.js
@ -15,7 +15,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';
@ -310,7 +310,7 @@ class SeriesDetails extends Component {
          </PageToolbarSection>
        </PageToolbar>

-        <PageContentBodyConnector innerClassName={styles.innerContentBody}>
+        <PageContentBody innerClassName={styles.innerContentBody}>
          <div className={styles.header}>
            <div
              className={styles.backdrop}
@ -646,7 +646,7 @@ class SeriesDetails extends Component {
            showImportMode={false}
            onModalClose={this.onInteractiveImportModalClose}
          />
-        </PageContentBodyConnector>
+        </PageContentBody>
      </PageContent>
    );
  }
--- a/frontend/src/Series/Editor/SeriesEditor.js
+++ b/frontend/src/Series/Editor/SeriesEditor.js
@ -6,7 +6,7 @@ import toggleSelected from 'Utilities/Table/toggleSelected';
 import { align, 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 PageToolbar from 'Components/Page/Toolbar/PageToolbar';
 import PageToolbarSection from 'Components/Page/Toolbar/PageToolbarSection';
 import FilterMenu from 'Components/Menu/FilterMenu';
@ -192,7 +192,7 @@ class SeriesEditor extends Component {
          </PageToolbarSection>
        </PageToolbar>

-        <PageContentBodyConnector>
+        <PageContentBody>
          {
            isFetching && !isPopulated &&
              <LoadingIndicator />
@ -239,7 +239,7 @@ class SeriesEditor extends Component {
            !error && isPopulated && !items.length &&
              <NoSeries totalItems={totalItems} />
          }
-        </PageContentBodyConnector>
+        </PageContentBody>

        <SeriesEditorFooter
          seriesIds={selectedSeriesIds}
--- a/frontend/src/Series/Index/SeriesIndex.js
+++ b/frontend/src/Series/Index/SeriesIndex.js
@ -5,7 +5,7 @@ import hasDifferentItemsOrOrder from 'Utilities/Object/hasDifferentItemsOrOrder'
 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';
@ -281,7 +281,7 @@ class SeriesIndex extends Component {
        </PageToolbar>

        <div className={styles.pageContentBodyWrapper}>
-          <PageContentBodyConnector
+          <PageContentBody
            registerScroller={this.setScrollerRef}
            className={styles.contentBody}
            innerClassName={styles[`${view}InnerContentBody`]}
@ -318,7 +318,7 @@ class SeriesIndex extends Component {
              !error && isPopulated && !items.length &&
                <NoSeries totalItems={totalItems} />
            }
-          </PageContentBodyConnector>
+          </PageContentBody>

          {
            isLoaded && !!jumpBarItems.order.length &&
--- 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>
    );
  }
--- 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}
--- 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';
@ -76,14 +76,14 @@ class IndexerSettings extends Component {
          onSavePress={this.onSavePress}
        />

-        <PageContentBodyConnector>
+        <PageContentBody>
          <IndexersConnector />

          <IndexerOptionsConnector
            onChildMounted={this.onChildMounted}
            onChildStateChange={this.onChildStateChange}
          />
-        </PageContentBodyConnector>
+        </PageContentBody>
      </PageContent>
    );
  }
--- 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';
@ -64,7 +64,7 @@ class MediaManagement extends Component {
          onSavePress={onSavePress}
        />

-        <PageContentBodyConnector>
+        <PageContentBody>
          <NamingConnector />

          {
@ -449,7 +449,7 @@ class MediaManagement extends Component {
            <RootFoldersConnector />
            <AddRootFolderConnector />
          </FieldSet>
-        </PageContentBodyConnector>
+        </PageContentBody>
      </PageContent>
    );
  }
--- a/frontend/src/Settings/Metadata/MetadataSettings.js
+++ b/frontend/src/Settings/Metadata/MetadataSettings.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 MetadatasConnector from './Metadata/MetadatasConnector';

@ -11,9 +11,9 @@ function MetadataSettings() {
        showSave={false}
      />

-      <PageContentBodyConnector>
+      <PageContentBody>
        <MetadatasConnector />
-      </PageContentBodyConnector>
+      </PageContentBody>
    </PageContent>
  );
 }
--- 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>
  );
 }
--- 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 SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';
 import QualityProfilesConnector from './Quality/QualityProfilesConnector';
 import LanguageProfilesConnector from './Language/LanguageProfilesConnector';
@ -24,14 +24,14 @@ class Profiles extends Component {
          showSave={false}
        />

-        <PageContentBodyConnector>
+        <PageContentBody>
          <DndProvider backend={HTML5Backend}>
            <QualityProfilesConnector />
            <LanguageProfilesConnector />
            <DelayProfilesConnector />
            <ReleaseProfilesConnector />
          </DndProvider>
-        </PageContentBodyConnector>
+        </PageContentBody>
      </PageContent>
    );
  }
--- 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>
    );
  }
--- 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"
@ -122,7 +122,7 @@ function Settings() {
        <div className={styles.summary}>
          Calendar, date and color impaired options
        </div>
-      </PageContentBodyConnector>
+      </PageContentBody>
    </PageContent>
  );
 }
--- 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>
  );
 }
--- 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>
    );
  }
--- 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}
--- 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>
  );
 }
--- 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>
    );
  }
--- 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>
    );
  }
--- 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>
  );
 }
--- a/frontend/src/System/Updates/Updates.js
+++ b/frontend/src/System/Updates/Updates.js
@ -8,7 +8,7 @@ import SpinnerButton from 'Components/Link/SpinnerButton';
 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';

@ -45,7 +45,7 @@ class Updates extends Component {

    return (
      <PageContent title="Updates">
-        <PageContentBodyConnector>
+        <PageContentBody>
          {
            !isPopulated && !hasError &&
              <LoadingIndicator />
@ -194,7 +194,7 @@ class Updates extends Component {
                Failed to update settings
              </div>
          }
-        </PageContentBodyConnector>
+        </PageContentBody>
      </PageContent>
    );
  }
--- a/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js
+++ b/frontend/src/Wanted/CutoffUnmet/CutoffUnmet.js
@ -12,7 +12,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 PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
@ -188,7 +188,7 @@ class CutoffUnmet extends Component {
          </PageToolbarSection>
        </PageToolbar>

-        <PageContentBodyConnector>
+        <PageContentBody>
          {
            isFetching && !isPopulated &&
              <LoadingIndicator />
@ -262,7 +262,7 @@ class CutoffUnmet extends Component {
                />
              </div>
          }
-        </PageContentBodyConnector>
+        </PageContentBody>
      </PageContent>
    );
  }
--- a/frontend/src/Wanted/Missing/Missing.js
+++ b/frontend/src/Wanted/Missing/Missing.js
@ -12,7 +12,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 PageToolbarSeparator from 'Components/Page/Toolbar/PageToolbarSeparator';
@ -201,7 +201,7 @@ class Missing extends Component {
          </PageToolbarSection>
        </PageToolbar>

-        <PageContentBodyConnector>
+        <PageContentBody>
          {
            isFetching && !isPopulated &&
              <LoadingIndicator />
@ -280,7 +280,7 @@ class Missing extends Component {
            isOpen={isInteractiveImportModalOpen}
            onModalClose={this.onInteractiveImportModalClose}
          />
-        </PageContentBodyConnector>
+        </PageContentBody>
      </PageContent>
    );
  }