Merge branch 'unstable' into ai/lint-20260129-7340230365703488282

tests/visual/overlay-layers.spec.ts

@@ -33,10 +33,7 @@ test.describe("overlay layering tokens", () => {
     await expect(page.locator("#mobileMenuBtn")).toHaveCount(0);
 
     const collapseToggle = page.locator("#sidebarCollapseToggle");
-
-    // Ensure the toggle is visible before proceeding.
-    // If this fails, the sidebar is likely hidden on tablet, which would require
-    // adjusting the viewport further or fixing the CSS.
+    await collapseToggle.scrollIntoViewIfNeeded();
     await expect(collapseToggle).toBeVisible();
 
     const initialLayout = await page.evaluate(() => {
@@ -129,11 +126,15 @@ test.describe("overlay layering tokens", () => {
     // Ensure the footer button is scrolled into view (especially for mobile viewports)
     await page.evaluate(() => {
       const sidebar = document.getElementById("sidebar");
-      if (sidebar) {
-        sidebar.scrollTop = sidebar.scrollHeight;
+      const footerBtn = document.getElementById("footerDropdownButton");
+      if (sidebar && footerBtn) {
+        footerBtn.scrollIntoView({ block: "center", inline: "center" });
       }
     });
 
+    // Wait for scroll to settle and layout to stabilize
+    await page.waitForTimeout(500);
+
     const expandedLayout = await page.evaluate(() => {
       const sidebar = document.getElementById("sidebar");
       const app = document.getElementById("app");
@@ -203,6 +204,7 @@ test.describe("overlay layering tokens", () => {
     expect(Math.abs(expandedLayout.marginLeft - expandedLayout.expectedMargin)).toBeLessThan(0.5);
 
     const footerButton = page.locator("#footerDropdownButton");
+    await footerButton.scrollIntoViewIfNeeded();
     await expect(footerButton).toBeVisible();
     await footerButton.click();
     await expect(footerButton).toHaveAttribute("aria-expanded", "true");