Align patrol page shell with utility header stack

This commit is contained in:
rcourtman
2026-04-17 19:11:53 +01:00
parent 2d0784ca61
commit deb701e340
2 changed files with 53 additions and 6 deletions
@@ -8,17 +8,15 @@ export function PatrolIntelligenceSurface() {
const state = usePatrolIntelligenceState();
return (
<div class="h-full flex flex-col bg-base">
<div class="space-y-6">
<PatrolIntelligenceHeader state={state} />
<PatrolIntelligenceBanners state={state} />
<div
class={`flex-1 overflow-auto p-4 transition-opacity ${!state.patrolEnabledLocal() ? 'opacity-50 pointer-events-none' : ''}`}
class={`space-y-4 transition-opacity ${!state.patrolEnabledLocal() ? 'opacity-50 pointer-events-none' : ''}`}
>
<div class="space-y-4">
<PatrolIntelligenceSummary state={state} />
<PatrolIntelligenceWorkspace state={state} />
</div>
<PatrolIntelligenceSummary state={state} />
<PatrolIntelligenceWorkspace state={state} />
</div>
</div>
);
@@ -16,6 +16,12 @@ const PAGE_HEADER_ROUTES = [
description:
"Review active incidents, confirm alert coverage, and control whether alerts are actively monitoring this install.",
},
{
slug: "settings",
route: "/settings/system-general",
title: "General",
description: "Manage appearance, layout, and default monitoring cadence.",
},
{
slug: "patrol",
route: "/patrol",
@@ -25,6 +31,19 @@ const PAGE_HEADER_ROUTES = [
},
] as const;
const ALIGNED_PAGE_HEADER_ROUTES = [
PAGE_HEADER_ROUTES[0],
PAGE_HEADER_ROUTES[1],
{
slug: "settings-operations",
route: "/settings/infrastructure-operations",
title: "Infrastructure Operations",
description:
"Bring infrastructure into Pulse, manage API-backed platform connections, and control which systems are actively reporting. Reporting and install workflows now live on the Operations tab.",
},
PAGE_HEADER_ROUTES[3],
] as const;
const PRIMARY_API_TOKEN =
process.env.PULSE_E2E_PRIMARY_API_TOKEN?.trim() ||
(typeof readRuntimeState()?.primaryAPIToken === "string"
@@ -83,4 +102,34 @@ test.describe("Top-level page header consistency", () => {
);
});
}
test("keeps primary page headings vertically aligned", async ({ page }) => {
let baselineY: number | null = null;
for (const surface of ALIGNED_PAGE_HEADER_ROUTES) {
await page.goto(surface.route, { waitUntil: "domcontentloaded" });
const pageHeading = page.getByRole("heading", {
level: 1,
name: surface.title,
});
await expect(pageHeading).toBeVisible();
const boundingBox = await pageHeading.boundingBox();
expect(
boundingBox,
`${surface.route} should expose a measurable heading box`,
).not.toBeNull();
if (baselineY === null) {
baselineY = boundingBox!.y;
continue;
}
expect(
Math.abs(boundingBox!.y - baselineY),
`${surface.route} should keep its top-level heading aligned with the other utility surfaces`,
).toBeLessThanOrEqual(1.5);
}
});
});