From 1dd6e1d65ca63225508af6aa048ee98bc247f876 Mon Sep 17 00:00:00 2001
From: Fredrik Strand Oseberg <fredrik.no@gmail.com>
Date: Fri, 12 Nov 2021 12:41:36 +0100
Subject: [PATCH] fix: mobile percentagecircle (#502)

---
 .../component/common/PercentageCircle/PercentageCircle.tsx  | 3 ++-
 .../FeatureOverviewEnvironmentMetrics.styles.ts             | 5 +++++
 .../FeatureOverviewEnvironmentMetrics.tsx                   | 6 +++++-
 3 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx b/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
index 7d91220fe7..bc9b139093 100644
--- a/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
+++ b/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
@@ -10,6 +10,7 @@ const PercentageCircle = ({
     styles,
     percentage,
     secondaryPieColor,
+    ...rest
 }: IPercentageCircleProps) => {
     const theme = useTheme();
 
@@ -40,7 +41,7 @@ const PercentageCircle = ({
         );
     }
 
-    return <div style={{ ...circle, ...styles }} />;
+    return <div style={{ ...circle, ...styles }} {...rest} />;
 };
 
 export default PercentageCircle;
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts
index 8de7064a6a..fdcc581370 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts
@@ -36,4 +36,9 @@ export const useStyles = makeStyles(theme => ({
             display: 'none',
         },
     },
+    [theme.breakpoints.down(400)]: {
+        percentageCircle: {
+            display: 'none',
+        },
+    },
 }));
diff --git a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
index e288c98af1..0feee6644a 100644
--- a/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView2/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
@@ -48,7 +48,11 @@ const FeatureOverviewEnvironmentMetrics = ({
                     the last hour.
                 </p>
             </div>
-            <PercentageCircle percentage={percentage} data-loading />
+            <PercentageCircle
+                className={styles.percentageCircle}
+                percentage={percentage}
+                data-loading
+            />
         </div>
     );
 };