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>
This commit is contained in:
Marc-André BombeckandClaude Opus 4.8 committed 2026-06-05 13:40:44 +02:00
1 parent 68ab78d6d8
commit 4be9767428
1 file changed
+19 -7
@@ -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>
);
};
}