From 6fdf06a88211716bdac751191d829c6bb968cccd Mon Sep 17 00:00:00 2001
From: nitsua <austin.w.best@gmail.com>
Date: Sat, 19 Sep 2020 14:36:22 -0400
Subject: [PATCH] Fix issue with the disk space label percents overlapping on
 small screens.

---
 frontend/src/System/Status/DiskSpace/DiskSpace.js         | 8 +++++---
 .../src/System/Status/DiskSpace/DiskSpaceConnector.js     | 7 +++++--
 2 files changed, 10 insertions(+), 5 deletions(-)

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