From a710c65df6280c9eb3178229c07f35ce3fab6321 Mon Sep 17 00:00:00 2001
From: Matthew Valancy <matthew.valancy@gmail.com>
Date: Wed, 17 Jun 2026 03:46:55 -0700
Subject: [PATCH] test(z-order): harden the overlay audits against false
 confidence

From adversarial review of the @zorder / @dismissal suites:
- assertOnTop now FAILS on a collapsed (zero-size) or off-screen overlay
  (previously empty/!fitsViewport silently counted as "on top").
- filter dropdowns get a stable data-testid="filter-dropdown" (ViewManager) and
  the test audits that instead of the app-wide-ambiguous ".absolute.top-full.z-50"
  selector, which could grade a different component's panel.
- firstInViewport gets a few px of slack so sub-pixel / CI-rendering overflow
  doesn't silently skip a real on-screen trigger.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 packages/web/src/components/ViewManager.tsx | 8 ++++----
 tests/e2e/overlay-dismissal.spec.ts         | 3 ++-
 tests/e2e/z-order.spec.ts                   | 8 ++++++--
 3 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/packages/web/src/components/ViewManager.tsx b/packages/web/src/components/ViewManager.tsx
index 5ab9477d..7f30e336 100644
--- a/packages/web/src/components/ViewManager.tsx
+++ b/packages/web/src/components/ViewManager.tsx
@@ -428,7 +428,7 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
                 </button>
 
                 {isTypeDropdownOpen && (
-                  <div className="absolute top-full left-0 mt-2 w-full bg-gray-700 border border-gray-600 rounded-lg shadow-2xl z-50 max-h-80 overflow-y-auto">
+                  <div data-testid="filter-dropdown" className="absolute top-full left-0 mt-2 w-full bg-gray-700 border border-gray-600 rounded-lg shadow-2xl z-50 max-h-80 overflow-y-auto">
                     <div className="p-2">
                       {typeOptions.map((option, index) => (
                         <button
@@ -502,7 +502,7 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
                 </button>
 
                 {isStatusDropdownOpen && (
-                  <div className="absolute top-full left-0 mt-2 w-full bg-gray-700 border border-gray-600 rounded-lg shadow-2xl z-50 max-h-80 overflow-y-auto">
+                  <div data-testid="filter-dropdown" className="absolute top-full left-0 mt-2 w-full bg-gray-700 border border-gray-600 rounded-lg shadow-2xl z-50 max-h-80 overflow-y-auto">
                     <div className="p-2">
                       {statusOptions.map((option, index) => (
                         <button
@@ -574,7 +574,7 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
                 </button>
 
                 {isPriorityDropdownOpen && (
-                  <div className="absolute top-full left-0 mt-2 w-full bg-gray-700 border border-gray-600 rounded-lg shadow-2xl z-50 max-h-80 overflow-y-auto">
+                  <div data-testid="filter-dropdown" className="absolute top-full left-0 mt-2 w-full bg-gray-700 border border-gray-600 rounded-lg shadow-2xl z-50 max-h-80 overflow-y-auto">
                     <div className="p-2">
                       {priorityOptions.map((option, index) => (
                         <button
@@ -639,7 +639,7 @@ const ViewManager: React.FC<ViewManagerProps> = ({ viewMode }) => {
                 </button>
 
                 {isContributorDropdownOpen && (
-                  <div className="absolute top-full left-0 mt-2 w-full bg-gray-700 border border-gray-600 rounded-lg shadow-2xl z-50 max-h-80 overflow-y-auto">
+                  <div data-testid="filter-dropdown" className="absolute top-full left-0 mt-2 w-full bg-gray-700 border border-gray-600 rounded-lg shadow-2xl z-50 max-h-80 overflow-y-auto">
                     <div className="p-2">
                       {contributorOptions.map((option, index) => (
                         <button
diff --git a/tests/e2e/overlay-dismissal.spec.ts b/tests/e2e/overlay-dismissal.spec.ts
index 9230bbd8..1b52d562 100644
--- a/tests/e2e/overlay-dismissal.spec.ts
+++ b/tests/e2e/overlay-dismissal.spec.ts
@@ -28,7 +28,8 @@ async function firstInViewport(page: Page, selector: string) {
     const el = loc.nth(i);
     if (!(await el.isVisible().catch(() => false))) continue;
     const box = await el.boundingBox().catch(() => null);
-    if (box && box.x >= 0 && box.y >= 0 && box.x + box.width <= vp.width + 1 && box.y + box.height <= vp.height + 1) return el;
+    // A few px of slack so sub-pixel/CI-rendering overflow doesn't silently skip a real trigger.
+    if (box && box.x >= -4 && box.y >= -4 && box.x + box.width <= vp.width + 4 && box.y + box.height <= vp.height + 4) return el;
   }
   return null;
 }
diff --git a/tests/e2e/z-order.spec.ts b/tests/e2e/z-order.spec.ts
index 7d37e4c4..a38733fb 100644
--- a/tests/e2e/z-order.spec.ts
+++ b/tests/e2e/z-order.spec.ts
@@ -51,7 +51,8 @@ async function firstInViewport(page: Page, selector: string) {
     const el = loc.nth(i);
     if (!(await el.isVisible().catch(() => false))) continue;
     const box = await el.boundingBox().catch(() => null);
-    if (box && box.x >= 0 && box.y >= 0 && box.x + box.width <= vp.width + 1 && box.y + box.height <= vp.height + 1) return el;
+    // A few px of slack so sub-pixel/CI-rendering overflow doesn't silently skip a real trigger.
+    if (box && box.x >= -4 && box.y >= -4 && box.x + box.width <= vp.width + 4 && box.y + box.height <= vp.height + 4) return el;
   }
   return null;
 }
@@ -60,6 +61,9 @@ async function firstInViewport(page: Page, selector: string) {
 async function assertOnTop(page: Page, selector: string, label: string) {
   const r = await auditOnTop(page, selector);
   expect(r.found, `${label}: overlay present (${selector})`).toBe(true);
+  // A collapsed (zero-size) or off-screen overlay must NOT count as "on top".
+  expect(r.empty, `${label}: overlay has real size (not collapsed)`).toBeFalsy();
+  expect(r.fitsViewport, `${label}: overlay fits within the viewport`).toBe(true);
   expect(r.coveredBy, `${label} is covered by: ${fmt(r.coveredBy)}`).toEqual([]);
   return r;
 }
@@ -108,7 +112,7 @@ test.describe('z-order: overlays render on top @zorder', () => {
           if (!(await btn.isVisible().catch(() => false))) continue;
           await btn.click();
           await page.waitForTimeout(400);
-          await assertOnTop(page, '.absolute.top-full.z-50', `filter "${label}" dropdown`);
+          await assertOnTop(page, '[data-testid="filter-dropdown"]', `filter "${label}" dropdown`);
           await btn.click().catch(() => {}); // toggle closed before the next one
           await page.waitForTimeout(200);
           tested++;