From fd82458e6c14c62669c75219abfa1d13af3a6e3f Mon Sep 17 00:00:00 2001
From: David Crespo <david-crespo@users.noreply.github.com>
Date: Thu, 19 Sep 2024 14:19:33 -0500
Subject: [PATCH] Give pagination bar the same z-index as topbar (#2457)

* give pagination bar the same z-index as topbar

* fix e2e test
---
 app/layouts/helpers.tsx   | 2 +-
 test/e2e/snapshots.e2e.ts | 4 ++++
 2 files changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/layouts/helpers.tsx b/app/layouts/helpers.tsx
index fc6173bd2b..64a00c9cb0 100644
--- a/app/layouts/helpers.tsx
+++ b/app/layouts/helpers.tsx
@@ -27,7 +27,7 @@ export function ContentPane() {
           <Outlet />
         </main>
       </div>
-      <div className="sticky bottom-0 shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
+      <div className="sticky bottom-0 z-topBar shrink-0 justify-between overflow-hidden border-t bg-default border-secondary empty:border-t-0">
         <Pagination.Target />
         <PageActionsTarget />
       </div>
diff --git a/test/e2e/snapshots.e2e.ts b/test/e2e/snapshots.e2e.ts
index 461f832628..2e211b4d6e 100644
--- a/test/e2e/snapshots.e2e.ts
+++ b/test/e2e/snapshots.e2e.ts
@@ -30,6 +30,10 @@ test('Confirm delete snapshot', async ({ page }) => {
 
   const row = page.getByRole('row', { name: 'disk-1-snapshot-6' })
 
+  // scroll a little so the dropdown menu isn't behind the pagination bar
+  await page.getByRole('table').click() // focus the content pane
+  await page.mouse.wheel(0, 200)
+
   async function clickDelete() {
     await row.getByRole('button', { name: 'Row actions' }).click()
     await page.getByRole('menuitem', { name: 'Delete' }).click()