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) <noreply@anthropic.com>

* fix(insights): restore mobile KPI column

---------

Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
Co-authored-by: Ravi Kumar L <ravi.lazar@clickhouse.com>

client/src/components/Insights/InsightsView.tsx

@@ -716,7 +716,10 @@ export default function InsightsView() {
           )}
           {data && (
             <>
-              <div className="grid w-full grid-cols-[repeat(auto-fit,minmax(min(100%,220px),1fr))] gap-3">
+              {/** 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. */}
+              <div className="grid w-full grid-cols-1 gap-3 sm:grid-cols-2 xl:grid-cols-4">
                 {kpiCards.map((card) => (
                   <KpiCard key={card.id} card={card} locale={locale} />
                 ))}