ui improvements

frontend/src/components/MetricCard.tsx

@@ -9,18 +9,25 @@ interface Props {
 export function MetricCard({ label, value, subtext }: Props) {
 	return (
 		<Card variant="outlined" sx={{ height: "100%" }}>
-			<CardContent sx={{ p: { xs: 1.5, sm: 2 } }}>
+			<CardContent
+				sx={{
+					p: { xs: 1.5, sm: 2 },
+					display: "flex",
+					flexDirection: "column",
+					gap: 0.5,
+					height: "100%",
+				}}
+			>
 				<Typography
 					variant="caption"
 					color="text.secondary"
-					sx={{ textTransform: "uppercase" }}
+					sx={{ textTransform: "uppercase", lineHeight: 1.2 }}
 				>
 					{label}
 				</Typography>
 				<Typography
 					variant="h5"
 					sx={{
-						mt: 0.5,
 						fontWeight: 700,
 						fontSize: { xs: "1.05rem", sm: "1.5rem" },
 						lineHeight: 1.15,
@@ -32,7 +39,7 @@ export function MetricCard({ label, value, subtext }: Props) {
 					<Typography
 						variant="caption"
 						color="text.secondary"
-						sx={{ whiteSpace: "pre-line", display: "block", mt: 0.25 }}
+						sx={{ whiteSpace: "pre-line", display: "block", lineHeight: 1.35 }}
 					>
 						{subtext}
 					</Typography>