mirror of
https://github.com/BerriAI/litellm.git
synced 2026-08-28 05:25:59 +00:00
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:
parent
5af59f3d53
commit
b341a22339
2 changed files with 10 additions and 1 deletions
|
|
@ -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();
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue