From d21bffa4c6cc6ddfc2503148b0897057debea89e Mon Sep 17 00:00:00 2001 From: Daniel Xavier <117164123+danielclickh@users.noreply.github.com> Date: Fri, 4 Sep 2026 17:17:30 +0100 Subject: [PATCH] fix(insights): stop the KPI grid orphaning a card on its own row (#15553) * fix(insights): stop the KPI grid orphaning a card on its own row `repeat(auto-fit, minmax(min(100%, 220px), 1fr))` packs as many 220px tracks as will fit, so every width between three and four tracks rendered three cards in the top row and left the fourth alone underneath. Four tiles divide evenly by two and by four, so those are the only counts that leave no hole. Pin the grid to two columns, widening to four at `xl`. Viewport breakpoints are sound here because `UnifiedSidebar` forces the panel collapsed on the Insights route (`panelExpanded = expanded && !isInsightsRoute`), so the content width is a fixed function of the viewport: `vw - 52 - 64`. At the `xl` boundary that leaves 1164px, or 282px per tile. Swept 640/768/900/1024/1100/1279/1280/1440/1600/1920/2560: every width renders either 4x1 or 2x2, never 3+1. Co-Authored-By: Claude Opus 5 (1M context) * fix(insights): restore mobile KPI column --------- Co-authored-by: Claude Opus 5 (1M context) Co-authored-by: Ravi Kumar L --- client/src/components/Insights/InsightsView.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/client/src/components/Insights/InsightsView.tsx b/client/src/components/Insights/InsightsView.tsx index ef7a35d456..d86d03b10e 100644 --- a/client/src/components/Insights/InsightsView.tsx +++ b/client/src/components/Insights/InsightsView.tsx @@ -716,7 +716,10 @@ export default function InsightsView() { )} {data && ( <> -
+ {/** Use explicit responsive counts: one column on narrow screens, + * two through mid-range, and four at xl. This avoids auto-fit's + * three-plus-one orphan without making mobile cards too narrow. */} +
{kpiCards.map((card) => ( ))}