SaaS fixes (#6578)

Co-authored-by: Claude Opus 4.8 <[email protected]>
Co-authored-by: James Brunton <[email protected]>
Co-authored-by: Reece Browne <[email protected]>
Co-authored-by: ConnorYoh <[email protected]>
Co-authored-by: Reece <[email protected]>
Co-authored-by: EthanHealy01 <[email protected]>
Co-authored-by: Ludy <[email protected]>

frontend/shared/components/MetricCard.tsx

@@ -14,6 +14,8 @@ export interface MetricCardProps {
   deltaDirection?: DeltaDirection;
   /** Visual emphasis. `primary` = darker surface, used for hero metrics. */
   emphasis?: "default" | "primary";
+  /** Density. `sm` tightens padding + value size for narrow rails/strips. */
+  size?: "sm" | "md";
   /** Optional icon shown in the top-right corner. */
   icon?: ReactNode;
   onClick?: () => void;
@@ -41,6 +43,7 @@ export function MetricCard({
   delta,
   deltaDirection,
   emphasis = "default",
+  size = "md",
   icon,
   onClick,
   className,
@@ -50,6 +53,7 @@ export function MetricCard({
 
   const classes = [
     "sui-metric",
+    `sui-metric--${size}`,
     emphasis === "primary" ? "sui-metric--primary" : "",
     interactive ? "sui-metric--interactive" : "",
     className ?? "",