Fixed field parameters.

src/components/common/Panel.tsx

@@ -2,5 +2,15 @@ import { Box } from '@umami/react-zen';
 import type { BoxProps } from '@umami/react-zen/Box';
 
 export function Panel(props: BoxProps) {
-  return <Box padding="6" border borderRadius="3" backgroundColor="solid" shadow="4" {...props} />;
+  return (
+    <Box
+      padding="6"
+      border
+      borderRadius="3"
+      backgroundColor
+      shadow="4"
+      position="relative"
+      {...props}
+    />
+  );
 }

src/components/input/DateFilter.tsx

@@ -1,4 +1,4 @@
-import { useState, Key } from 'react';
+import { useState, Key, Fragment } from 'react';
 import { Icon, Modal, Select, Text, Row, ListItem, ListSeparator, Dialog } from '@umami/react-zen';
 import { endOfYear, isSameDay } from 'date-fns';
 import { DatePickerForm } from '@/components/metrics/DatePickerForm';
@@ -101,12 +101,12 @@ export function DateFilter({
       >
         {options.map(({ label, value, divider }: any) => {
           return (
-            <>
+            <Fragment key={label}>
               {divider && <ListSeparator />}
-              <ListItem key={value} id={value}>
+              <ListItem key={label} id={value}>
                 {label}
               </ListItem>
-            </>
+            </Fragment>
           );
         })}
       </Select>

src/components/metrics/MetricCard.module.css

@@ -1,6 +1,5 @@
 .card {
   border-right: 1px solid var(--border-color);
-  padding: 0 50px;
 }
 
 .card:last-child {

src/components/metrics/MetricCard.tsx

@@ -34,8 +34,12 @@ export const MetricCard = ({
   const prevProps = useSpring({ x: Number(diff) || 0, from: { x: 0 } });
 
   return (
-    <Column className={styles.card} justifyContent="center">
-      {showLabel && <Text weight="bold">{label}</Text>}
+    <Column className={styles.card} justifyContent="center" paddingX="8">
+      {showLabel && (
+        <Text weight="bold" wrap="nowrap">
+          {label}
+        </Text>
+      )}
       <Text size="8" weight="bold" wrap="nowrap">
         <AnimatedDiv title={value?.toString()}>{props?.x?.to(x => formatValue(x))}</AnimatedDiv>
       </Text>