Fix issue with the disk space label percents overlapping on small screens.

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}%`}
                           />
                         </TableRowCell>
@@ -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;

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
       };
     }
   );