From deb701e34068ca8c4e50d6778c0980b4d3b5bf6b Mon Sep 17 00:00:00 2001
From: rcourtman <courtmanr@gmail.com>
Date: Fri, 17 Apr 2026 19:11:53 +0100
Subject: [PATCH] Align patrol page shell with utility header stack

---
 .../patrol/PatrolIntelligenceSurface.tsx      | 10 ++--
 .../tests/60-page-header-consistency.spec.ts  | 49 +++++++++++++++++++
 2 files changed, 53 insertions(+), 6 deletions(-)

diff --git a/frontend-modern/src/features/patrol/PatrolIntelligenceSurface.tsx b/frontend-modern/src/features/patrol/PatrolIntelligenceSurface.tsx
index 16a94cce4..765a9ac0d 100644
--- a/frontend-modern/src/features/patrol/PatrolIntelligenceSurface.tsx
+++ b/frontend-modern/src/features/patrol/PatrolIntelligenceSurface.tsx
@@ -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>
   );
diff --git a/tests/integration/tests/60-page-header-consistency.spec.ts b/tests/integration/tests/60-page-header-consistency.spec.ts
index 61c26e713..64d316670 100644
--- a/tests/integration/tests/60-page-header-consistency.spec.ts
+++ b/tests/integration/tests/60-page-header-consistency.spec.ts
@@ -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);
+    }
+  });
 });