From 6d122db3882cbbf29fe006d5c7c546707021bb60 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Thu, 19 Sep 2024 11:56:03 -0500
Subject: [PATCH 1/3] give pagination bar the same z-index as topbar

---
 app/layouts/helpers.tsx | 2 +-
 1 file changed, 1 insertion(+), 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>

From 0d811c9eb09f21cbacf8d8c603af43b9024682dd Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Thu, 19 Sep 2024 14:05:03 -0500
Subject: [PATCH 2/3] fix e2e test

---
 test/e2e/snapshots.e2e.ts | 4 ++++
 1 file changed, 4 insertions(+)

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()

From bfe00fdd2520548f4f0898f220693a76444123a9 Mon Sep 17 00:00:00 2001
From: David Crespo <david.crespo@oxidecomputer.com>
Date: Thu, 19 Sep 2024 12:15:51 -0500
Subject: [PATCH 3/3] remove unused inline pagination concept

---
 app/components/Pagination.tsx | 8 +-------
 app/table/QueryTable.tsx      | 4 ----
 app/ui/lib/Pagination.tsx     | 3 ---
 3 files changed, 1 insertion(+), 14 deletions(-)

diff --git a/app/components/Pagination.tsx b/app/components/Pagination.tsx
index 3a09c77bc3..f164208fb1 100644
--- a/app/components/Pagination.tsx
+++ b/app/components/Pagination.tsx
@@ -14,13 +14,7 @@ import {
 
 const Tunnel = tunnel('pagination')
 
-interface PaginationProps extends UIPaginationProps {
-  /** If true pagination will be rendered wherever `Pagination.Target` is included */
-  inline?: boolean
-}
-export function Pagination({ inline = false, ...props }: PaginationProps) {
-  if (inline) return <UIPagination {...props} />
-
+export function Pagination(props: UIPaginationProps) {
   return (
     <Tunnel.In>
       <UIPagination className="gutter h-14 py-5" {...props} />
diff --git a/app/table/QueryTable.tsx b/app/table/QueryTable.tsx
index f4906c3d80..4c78da2cef 100644
--- a/app/table/QueryTable.tsx
+++ b/app/table/QueryTable.tsx
@@ -53,8 +53,6 @@ export const useQueryTable = <A extends ApiListMethods, M extends keyof A>(
 type QueryTableProps<Item> = {
   /** Prints table data in the console when enabled */
   debug?: boolean
-  /** Function that produces a list of actions from a row item */
-  pagination?: 'inline' | 'page'
   pageSize?: number
   rowHeight?: 'small' | 'large'
   emptyState: React.ReactElement
@@ -71,7 +69,6 @@ const makeQueryTable = <Item extends Record<string, unknown>>(
 ): ComponentType<QueryTableProps<Item>> =>
   function QueryTable({
     debug,
-    pagination = 'page',
     pageSize = PAGE_SIZE,
     rowHeight = 'small',
     emptyState,
@@ -115,7 +112,6 @@ const makeQueryTable = <Item extends Record<string, unknown>>(
       <>
         <Table table={table} rowHeight={rowHeight} />
         <Pagination
-          inline={pagination === 'inline'}
           pageSize={pageSize}
           hasNext={tableData.length === pageSize}
           hasPrev={hasPrev}
diff --git a/app/ui/lib/Pagination.tsx b/app/ui/lib/Pagination.tsx
index 3badef005f..1257e10e8c 100644
--- a/app/ui/lib/Pagination.tsx
+++ b/app/ui/lib/Pagination.tsx
@@ -27,7 +27,6 @@ const PageInput = ({ number, className }: PageInputProps) => {
 }
 
 export interface PaginationProps {
-  type?: 'inline' | 'page'
   pageSize: number
   hasNext: boolean
   hasPrev: boolean
@@ -37,7 +36,6 @@ export interface PaginationProps {
   className?: string
 }
 export const Pagination = ({
-  type = 'inline',
   pageSize,
   hasNext,
   hasPrev,
@@ -50,7 +48,6 @@ export const Pagination = ({
     <>
       <div
         className={cn(
-          type === 'page' && 'py-5',
           'flex items-center justify-between text-mono-sm text-default bg-default',
           className
         )}