fix(ui): stabilize overview responsive layout (#12318)

Co-authored-by: Alan Buscaglia <gentlemanprogramming@gmail.com>

ui/app/(prowler)/_overview/threat-score/_components/threat-score.test.tsx

@@ -0,0 +1,17 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+
+import { ThreatScore } from "./threat-score";
+
+describe("ThreatScore", () => {
+  it("keeps the card full width until the overview row becomes horizontal", () => {
+    render(<ThreatScore score={75} />);
+
+    const card = screen
+      .getByText("Prowler ThreatScore")
+      .closest('[data-slot="card"]');
+
+    expect(card).toHaveClass("xl:max-w-[312px]");
+    expect(card).not.toHaveClass("lg:max-w-[312px]");
+  });
+});

ui/app/(prowler)/_overview/threat-score/_components/threat-score.tsx

@@ -115,7 +115,7 @@ export function ThreatScore({
   return (
     <Card
       variant="base"
-      className="flex min-h-[372px] w-full flex-col justify-between lg:max-w-[312px]"
+      className="flex min-h-[372px] w-full flex-col justify-between xl:max-w-[312px]"
     >
       <CardHeader>
         <CardTitle>Prowler ThreatScore</CardTitle>

ui/changelog.d/overview-threatscore-layout.fixed.md

@@ -0,0 +1 @@
+Overview ThreatScore card no longer leaves unused horizontal space at responsive layout boundaries