fix(ui): keep the guardrails metric cards wrapping at narrow widths

The antd Row and Col the migration replaced never squeezed the summary
cards below their content width; they wrapped onto a second line instead.
Measured on a live dashboard, antd laid out five per row at 1280 and 1024,
then four plus one at 900 and three plus two at 820, never narrower than
about 126px. A fixed grid-cols-5 kept all five on one line and compressed
them to 86px at 820, so the metric values overflowed their cards.

An auto-fit track with a 7rem minimum reproduces antd's wrap points and
card widths exactly at all four measured viewports, and is identical at
1280, so the route's visual baseline is unchanged.

The added test fails against grid-cols-5 and passes against the track
This commit is contained in:
Yuneng Jiang 2026-08-13 15:57:03 -07:00
parent 5af59f3d53
commit b341a22339
No known key found for this signature in database
2 changed files with 10 additions and 1 deletions

View file

@ -152,6 +152,15 @@ describe("GuardrailsOverview", () => {
await waitFor(() => expect(document.querySelector('[aria-busy="true"]')).toBeInTheDocument());
});
it("wraps the metric cards on a flexible track instead of a fixed column count", async () => {
renderOverview();
const grid = (await screen.findByText("Total Evaluations")).closest("div.grid");
expect(grid).not.toBeNull();
expect(grid!.className).toMatch(/grid-cols-\[repeat\(auto-fit,minmax\([^)]+,1fr\)\)\]/);
});
it("shows a failure message when the usage request rejects", async () => {
mockGetGuardrailsUsageOverview.mockRejectedValue(new Error("network down"));
renderOverview();

View file

@ -211,7 +211,7 @@ export function GuardrailsOverview({
</div>
</div>
<div className="mb-6 grid grid-cols-5 gap-4">
<div className="mb-6 grid grid-cols-[repeat(auto-fit,minmax(7rem,1fr))] gap-4">
<MetricCard label="Total Evaluations" value={metrics.totalRequests.toLocaleString()} />
<MetricCard
label="Blocked Requests"