refactor(web/progress): improve progress circle alignment

apparently the circle progress wasn't properly aligned this whole time

web/src/features/progress/CircleProgressbar.tsx

@@ -48,6 +48,10 @@ const useStyles = createStyles((theme, params: { position: 'middle' | 'bottom';
     textAlign: 'center',
     textShadow: theme.shadows.sm,
     color: theme.colors.gray[3],
+    height: 25,
+  },
+  wrapper: {
+    marginTop: params.position === 'middle' ? 25 : undefined,
   },
 }));
 
@@ -93,15 +97,17 @@ const CircleProgressbar: React.FC = () => {
     <>
       <Stack spacing={0} className={classes.container}>
         <ScaleFade visible={visible}>
-          <RingProgress
+          <Stack spacing={0} align="center" className={classes.wrapper}>
-            size={90}
+            <RingProgress
-            thickness={7}
+              size={90}
-            sections={[{ value: 0, color: theme.primaryColor }]}
+              thickness={7}
-            onAnimationEnd={progressComplete}
+              sections={[{ value: 0, color: theme.primaryColor }]}
-            className={classes.progress}
+              onAnimationEnd={progressComplete}
-            label={<Text className={classes.value}>{value}%</Text>}
+              className={classes.progress}
-          />
+              label={<Text className={classes.value}>{value}%</Text>}
-          {label && <Text className={classes.label}>{label}</Text>}
+            />
+            {label && <Text className={classes.label}>{label}</Text>}
+          </Stack>
         </ScaleFade>
       </Stack>
     </>