From 4be97674281ad8ad88b2ea4feb42b332d4664dde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marc-Andr=C3=A9=20Bombeck?= <mbombeck@gmail.com>
Date: Fri, 5 Jun 2026 13:39:19 +0200
Subject: [PATCH] fix(insights): normalize the assessment-card tile-header icon
 size

The TileHeader nodeIcon path rendered the caller-passed icon node verbatim and
dropped the canonical h-5 w-5 text-foreground class TileHeader forwards, so a
caller passing an unsized node could drift off the contract. Forward the class
onto a sizing span that pins any child SVG to the canonical box regardless of
what the caller passed. Existing call sites that already pass a pre-sized icon
stay visually identical.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 .../insights/insight-status-card.tsx          | 26 ++++++++++++++-----
 1 file changed, 19 insertions(+), 7 deletions(-)

diff --git a/src/components/insights/insight-status-card.tsx b/src/components/insights/insight-status-card.tsx
index 192be556b..90f837694 100644
--- a/src/components/insights/insight-status-card.tsx
+++ b/src/components/insights/insight-status-card.tsx
@@ -17,14 +17,26 @@ import { useFeatureFlags } from "@/hooks/use-feature-flags";
  * `<TileHeader>`. Callers still pass a pre-sized icon NODE (e.g.
  * `<HeartPulse className="h-5 w-5" />`) because the bespoke metric pages
  * own that prop; `<TileHeader>` drives its icon off a component, so wrap
- * the node in a thin component that renders it verbatim. The node already
- * carries the `h-5 w-5` foreground sizing `<TileHeader>` would apply, so
- * the rendered row is byte-identical to the previous hand-rolled `flex
- * items-center gap-2` header.
+ * the node in a thin component that renders it.
+ *
+ * v1.12.7 (M2) — `<TileHeader>` owns the canonical `h-5 w-5 text-foreground`
+ * sizing and passes it through as `className` to its icon component. The
+ * previous wrapper rendered the node verbatim and dropped that class, so a
+ * caller passing an unsized (or mis-sized) node could drift off the contract.
+ * The wrapper now forwards `<TileHeader>`'s className onto a sizing span that
+ * normalizes the glyph — the `[&>svg]:size-5` rule pins any child SVG to the
+ * canonical box regardless of what the caller passed. Callers that already
+ * pass `<Icon className="h-5 w-5" />` stay visually identical.
  */
-function nodeIcon(icon: React.ReactNode): React.ComponentType {
-  return function StatusIcon() {
-    return <>{icon}</>;
+function nodeIcon(icon: React.ReactNode): React.ComponentType<{
+  className?: string;
+}> {
+  return function StatusIcon({ className }: { className?: string }) {
+    return (
+      <span className={cn("inline-flex [&>svg]:size-5", className)}>
+        {icon}
+      </span>
+    );
   };
 }