Updated reports components.

src/components/metrics/MetricsBar.tsx

@@ -1,8 +1,6 @@
 import { ReactNode } from 'react';
-import { Loading, Row } from '@umami/react-zen';
-import { cloneChildren } from '@/lib/react';
+import { Grid, Loading } from '@umami/react-zen';
 import { ErrorMessage } from '@/components/common/ErrorMessage';
-import { formatLongNumber } from '@/lib/format';
 
 export interface MetricsBarProps {
   isLoading?: boolean;
@@ -12,18 +10,15 @@ export interface MetricsBarProps {
 }
 
 export function MetricsBar({ children, isLoading, isFetched, error }: MetricsBarProps) {
-  const formatFunc = n => (n >= 0 ? formatLongNumber(n) : `-${formatLongNumber(Math.abs(n))}`);
-
   return (
-    <Row>
+    <>
       {isLoading && !isFetched && <Loading icon="dots" />}
       {error && <ErrorMessage />}
-      {!isLoading &&
-        !error &&
-        isFetched &&
-        cloneChildren(children, child => {
-          return { format: child?.props['format'] || formatFunc };
-        })}
-    </Row>
+      {!isLoading && !error && isFetched && (
+        <Grid columns="repeat(auto-fill, minmax(200px, 1fr))" width="100%" gapY="3">
+          {children}
+        </Grid>
+      )}
+    </>
   );
 }