fix: polish metric and bar chart layouts

Author: mohsinht

src/components/BlockRenderer.tsx

@@ -180,18 +180,18 @@ export function BlockRenderer({
   if (block.kind === "metric-group") {
     return (
       <Panel block={block} className="bg-card/80" emphasized={emphasized} layout={layout}>
-        <div
-          className="grid gap-px overflow-hidden rounded-lg bg-border"
-          style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 13rem), 1fr))" }}
-        >
+        <div className="grid gap-2" style={{ gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 11rem), 1fr))" }}>
           {block.metrics.map((metric) => (
-            <div className="group min-w-0 bg-card px-4 py-3 transition-colors hover:bg-accent/45" key={metric.label}>
+            <div
+              className="group min-w-0 rounded-lg border border-border bg-card px-4 py-3 transition-colors hover:bg-accent/45"
+              key={metric.label}
+            >
               <div className="mb-2 flex items-center gap-2 text-xs font-medium text-muted-foreground">
                 <span aria-hidden="true" className={cn("size-1.5 rounded-full", toneDot[metric.tone || "neutral"])} />
                 {metric.label}
               </div>
               <div className="flex min-w-0 items-end gap-2">
-                <span className="min-w-0 break-words text-[clamp(1.25rem,2vw,1.5rem)] font-semibold leading-tight tracking-tight tabular-nums">
+                <span className="min-w-0 break-words text-[clamp(1rem,1.5vw,1.25rem)] font-semibold leading-tight tracking-tight tabular-nums">
                   {formatValue(metric.value, metric.format, instance)}
                   {metric.unit ? <span className="ml-1 text-sm font-medium text-muted-foreground">{metric.unit}</span> : null}
                 </span>

src/components/ChartVisual.tsx

@@ -53,7 +53,10 @@ function barDomain(values: number[]) {
   const max = Math.max(...values, 0)
   if (min === max) return { min: min - 1, max: max + 1 }
   const padding = (max - min) * 0.08
-  return { min: Math.min(0, min - padding), max: Math.max(0, max + padding) }
+  return {
+    min: min >= 0 ? 0 : min - padding,
+    max: max <= 0 ? 0 : max + padding,
+  }
 }
 
 function yPosition(value: number, min: number, max: number) {