fix: mobile percentagecircle (#502)

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;

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',
+        },
+    },
 }));

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