From 023664847edf6613e6adef13c93dab891153c6f0 Mon Sep 17 00:00:00 2001
From: "google-labs-jules[bot]"
 <161369871+google-labs-jules[bot]@users.noreply.github.com>
Date: Tue, 10 Feb 2026 13:13:53 +0000
Subject: [PATCH] Fix flaky popover E2E test by enforcing layout constraints
 and optimizing popover engine

- Updated `js/ui/overlay/popoverEngine.js` to use `fallbackStrategy: "bestFit"` in `flip` middleware, ensuring popovers choose the most visible placement when space is constrained.
- Updated `tests/e2e/popover.spec.ts` to enforce a tall body with top padding and scroll the trigger to the bottom of the viewport, creating a deterministic environment for testing popover flipping.
- Unskipped the "keeps the bottom-right grid menu inside the viewport" test case.

Co-authored-by: PR0M3TH3AN <53631862+PR0M3TH3AN@users.noreply.github.com>
---
 js/ui/overlay/popoverEngine.js |  2 +-
 tests/e2e/popover.spec.ts      | 13 +++++++------
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/js/ui/overlay/popoverEngine.js b/js/ui/overlay/popoverEngine.js
index 46fda272..00285ebd 100644
--- a/js/ui/overlay/popoverEngine.js
+++ b/js/ui/overlay/popoverEngine.js
@@ -793,7 +793,7 @@ export function createPopover(trigger, render, options = {}) {
       const safePadding = Number.isFinite(viewportPadding) ? viewportPadding : 0;
       const middleware = [
         offset(effectiveGap),
-        flip({ padding: safePadding }),
+        flip({ padding: safePadding, fallbackStrategy: "bestFit" }),
         shift({ padding: safePadding }),
       ];
 
diff --git a/tests/e2e/popover.spec.ts b/tests/e2e/popover.spec.ts
index 8e63e9a9..37482c5d 100644
--- a/tests/e2e/popover.spec.ts
+++ b/tests/e2e/popover.spec.ts
@@ -30,17 +30,18 @@ test.describe("popover layout scenarios", () => {
   });
 
   // flaky: Popover fails to flip to top in restricted viewport (floating-ui issue?)
-  test.skip("keeps the bottom-right grid menu inside the viewport", async ({ page }) => {
-    // Force a tall body to ensure there is space for the popover to flip to the top
-    await page.addStyleTag({ content: "body { min-height: 2000px !important; }" });
+  test("keeps the bottom-right grid menu inside the viewport", async ({ page }) => {
+    // Force a tall body with top padding to ensure there is space above for the popover to flip to
+    await page.addStyleTag({ content: "body { padding-top: 1000px !important; min-height: 3000px !important; }" });
     // Reduce viewport height to force the menu to flip to the top
     await page.setViewportSize({ width: 1280, height: 250 });
 
     const trigger = page.locator('[data-test-trigger="grid-bottom-right"]');
-    // Scroll to bottom to ensure the element is near the viewport edge
-    await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
+    // Scroll the element to the bottom edge of the viewport
+    await trigger.evaluate((el) => el.scrollIntoView({ block: "end", inline: "nearest" }));
 
-    await trigger.click();
+    // Use force: true to prevent Playwright from attempting to scroll further
+    await trigger.click({ force: true });
     const panel = page.locator('[data-test-panel="grid-bottom-right"]');
     await expect(panel).toHaveAttribute("data-popover-state", "open");