From 8270979ec889c5551338814da92a271b108a0be2 Mon Sep 17 00:00:00 2001
From: Alejandro Bailo <59607668+alejandrobailo@users.noreply.github.com>
Date: Wed, 9 Sep 2026 23:05:09 +0200
Subject: [PATCH] fix(ui): align scan filters and actions (#12781)
---
ui/changelog.d/scans-filter-actions.fixed.md | 1 +
ui/components/scans/import-findings-modal.tsx | 5 +-
ui/components/scans/scans-filter-bar.tsx | 54 ++++++++++--------
ui/components/scans/scans-page-shell.test.tsx | 31 ++++++----
ui/components/scans/scans-page-shell.tsx | 36 ++++++------
.../scans/evidence/scans-controls-desktop.png | Bin 0 -> 28212 bytes
.../scans/evidence/scans-controls-mobile.png | Bin 0 -> 24134 bytes
.../scans/evidence/scans-controls-tablet.png | Bin 0 -> 23298 bytes
ui/tests/scans/scans-page.ts | 4 +-
ui/tests/scans/scans.md | 3 +-
10 files changed, 73 insertions(+), 61 deletions(-)
create mode 100644 ui/changelog.d/scans-filter-actions.fixed.md
create mode 100644 ui/tests/scans/evidence/scans-controls-desktop.png
create mode 100644 ui/tests/scans/evidence/scans-controls-mobile.png
create mode 100644 ui/tests/scans/evidence/scans-controls-tablet.png
diff --git a/ui/changelog.d/scans-filter-actions.fixed.md b/ui/changelog.d/scans-filter-actions.fixed.md
new file mode 100644
index 0000000000..3220d59a8e
--- /dev/null
+++ b/ui/changelog.d/scans-filter-actions.fixed.md
@@ -0,0 +1 @@
+Scans page filter widths and action button styling, with Launch Scan and Import Findings grouped beside the tabs and sized consistently with Configure Mutelist
diff --git a/ui/components/scans/import-findings-modal.tsx b/ui/components/scans/import-findings-modal.tsx
index c367829ea2..2016a50641 100644
--- a/ui/components/scans/import-findings-modal.tsx
+++ b/ui/components/scans/import-findings-modal.tsx
@@ -223,10 +223,9 @@ export function ImportFindingsModal() {
<>
diff --git a/ui/components/scans/scans-filter-bar.tsx b/ui/components/scans/scans-filter-bar.tsx
index de4539651f..f46a29c07a 100644
--- a/ui/components/scans/scans-filter-bar.tsx
+++ b/ui/components/scans/scans-filter-bar.tsx
@@ -31,7 +31,7 @@ interface ScansFilterBarProps {
onScanStatusChange: (value: string) => void;
}
-const filterItemClass = "w-full md:w-[calc(50%-0.375rem)] xl:w-60";
+const filterItemClass = "w-full sm:max-w-[240px] sm:min-w-[180px] sm:flex-1";
export function ScansFilterBar({
providers,
@@ -67,33 +67,37 @@ export function ScansFilterBar({
{showScheduleTypeFilter && (
-
+
+
+
)}
{showStatusFilter && (
-
+
+
+
)}
>
);
diff --git a/ui/components/scans/scans-page-shell.test.tsx b/ui/components/scans/scans-page-shell.test.tsx
index 8d67c0d9da..6809cf087b 100644
--- a/ui/components/scans/scans-page-shell.test.tsx
+++ b/ui/components/scans/scans-page-shell.test.tsx
@@ -336,26 +336,35 @@ describe("ScansPageShell", () => {
expect(screen.queryByRole("alert")).not.toBeInTheDocument();
});
- it("keeps launch scan with filters and mutelist with tabs", () => {
- vi.stubEnv("UI_CLOUD_ENABLED", "false");
+ it("keeps launch scan, import findings, and mutelist with tabs", () => {
+ // Given
+ vi.stubEnv("UI_CLOUD_ENABLED", "true");
+ // When
render(
-
+
Scans table
,
);
- expect(
- screen.getByRole("group", { name: /scan filters and actions/i }),
- ).toContainElement(screen.getByRole("button", { name: /launch scan/i }));
- expect(
- screen.getByRole("group", { name: /scan filters and actions/i }),
- ).not.toContainElement(
- screen.getByRole("link", { name: /configure mutelist/i }),
+ // Then
+ const tabs = screen.getByRole("group", { name: /scan tabs/i });
+ expect(tabs).toContainElement(
+ screen.getByRole("button", { name: /launch scan/i }),
);
- expect(screen.getByRole("group", { name: /scan tabs/i })).toContainElement(
+ expect(tabs).toContainElement(
+ screen.getByRole("button", { name: /import findings/i }),
+ );
+ expect(tabs).toContainElement(
screen.getByRole("link", { name: /configure mutelist/i }),
);
+ expect(
+ screen.getByRole("group", { name: /scan filters/i }),
+ ).toContainElement(screen.getByText("Shared scan filters"));
});
it("shows the active scans count in the in progress tab", () => {
diff --git a/ui/components/scans/scans-page-shell.tsx b/ui/components/scans/scans-page-shell.tsx
index 1575c026fc..fc597c95bf 100644
--- a/ui/components/scans/scans-page-shell.tsx
+++ b/ui/components/scans/scans-page-shell.tsx
@@ -135,8 +135,8 @@ export function ScansPageShell({
)}
-
-
- {isCloudEnvironment && hasManageIngestionsPermission && (
-
- )}
{isCloudEnvironment && }
@@ -174,10 +160,10 @@ export function ScansPageShell({