diff --git a/frontend/src/System/Status/DiskSpace/DiskSpace.js b/frontend/src/System/Status/DiskSpace/DiskSpace.js index b05b27f4b..cd9fd643c 100644 --- a/frontend/src/System/Status/DiskSpace/DiskSpace.js +++ b/frontend/src/System/Status/DiskSpace/DiskSpace.js @@ -42,7 +42,8 @@ class DiskSpace extends Component { render() { const { isFetching, - items + items, + isSmallScreen } = this.props; return ( @@ -98,7 +99,7 @@ class DiskSpace extends Component { progress={diskUsage} kind={diskUsageKind} size={sizes.MEDIUM} - showText={diskUsage >= 12} + showText={((!isSmallScreen && diskUsage >= 12) || (isSmallScreen && diskUsage >= 45))} text={`${diskUsage}%`} /> @@ -117,7 +118,8 @@ class DiskSpace extends Component { DiskSpace.propTypes = { isFetching: PropTypes.bool.isRequired, - items: PropTypes.array.isRequired + items: PropTypes.array.isRequired, + isSmallScreen: PropTypes.bool.isRequired }; export default DiskSpace; diff --git a/frontend/src/System/Status/DiskSpace/DiskSpaceConnector.js b/frontend/src/System/Status/DiskSpace/DiskSpaceConnector.js index 3049b2ead..873494a1a 100644 --- a/frontend/src/System/Status/DiskSpace/DiskSpaceConnector.js +++ b/frontend/src/System/Status/DiskSpace/DiskSpaceConnector.js @@ -3,12 +3,14 @@ import React, { Component } from 'react'; import { connect } from 'react-redux'; import { createSelector } from 'reselect'; import { fetchDiskSpace } from 'Store/Actions/systemActions'; +import createDimensionsSelector from 'Store/Selectors/createDimensionsSelector'; import DiskSpace from './DiskSpace'; function createMapStateToProps() { return createSelector( (state) => state.system.diskSpace, - (diskSpace) => { + createDimensionsSelector(), + (diskSpace, dimensions) => { const { isFetching, items @@ -16,7 +18,8 @@ function createMapStateToProps() { return { isFetching, - items + items, + isSmallScreen: dimensions.isSmallScreen }; } );