fix: resolve pagination amount position

jakehwll · jakehwll · commit 742a0ec1b03f · 2025-12-12T03:01:22.000Z
diff --git a/site/src/components/PaginationWidget/PaginationContainer.tsx b/site/src/components/PaginationWidget/PaginationContainer.tsx
@@ -1,6 +1,6 @@
 import type { PaginationResultInfo } from "hooks/usePaginatedQuery";
 import type { FC, HTMLAttributes } from "react";
-import { PaginationHeader } from "./PaginationHeader";
+import { PaginationAmount } from "./PaginationHeader";
 import { PaginationWidgetBase } from "./PaginationWidgetBase";
 
 export type PaginationResult = PaginationResultInfo & {
@@ -10,58 +10,43 @@ export type PaginationResult = PaginationResultInfo & {
 type PaginationProps = HTMLAttributes<HTMLDivElement> & {
 	query: PaginationResult;
 	paginationUnitLabel: string;
-	paginationPosition?: "top" | "bottom";
 };
 
 export const PaginationContainer: FC<PaginationProps> = ({
 	children,
 	query,
 	paginationUnitLabel,
-	paginationPosition = "top",
 	...delegatedProps
 }) => {
 	return (
-		<>
-			{paginationPosition === "top" && (
-				<PaginationHeader
-					limit={query.limit}
+		<div
+			css={{
+				display: "flex",
+				flexFlow: "column nowrap",
+				rowGap: "16px",
+			}}
+			{...delegatedProps}
+		>
+			{children}
+
+			<PaginationAmount
+				limit={query.limit}
+				totalRecords={query.totalRecords}
+				currentOffsetStart={query.currentOffsetStart}
+				paginationUnitLabel={paginationUnitLabel}
+				className="justify-end"
+			/>
+
+			{query.isSuccess && (
+				<PaginationWidgetBase
 					totalRecords={query.totalRecords}
-					currentOffsetStart={query.currentOffsetStart}
-					paginationUnitLabel={paginationUnitLabel}
+					currentPage={query.currentPage}
+					pageSize={query.limit}
+					onPageChange={query.onPageChange}
+					hasPreviousPage={query.hasPreviousPage}
+					hasNextPage={query.hasNextPage}
 				/>
 			)}
-
-			<div
-				css={{
-					display: "flex",
-					flexFlow: "column nowrap",
-					rowGap: "16px",
-				}}
-				{...delegatedProps}
-			>
-				{children}
-
-				{paginationPosition === "bottom" && (
-					<PaginationHeader
-						limit={query.limit}
-						totalRecords={query.totalRecords}
-						currentOffsetStart={query.currentOffsetStart}
-						paginationUnitLabel={paginationUnitLabel}
-						className="pt-8 justify-end"
-					/>
-				)}
-
-				{query.isSuccess && (
-					<PaginationWidgetBase
-						totalRecords={query.totalRecords}
-						currentPage={query.currentPage}
-						pageSize={query.limit}
-						onPageChange={query.onPageChange}
-						hasPreviousPage={query.hasPreviousPage}
-						hasNextPage={query.hasNextPage}
-					/>
-				)}
-			</div>
-		</>
+		</div>
 	);
 };
diff --git a/site/src/components/PaginationWidget/PaginationHeader.tsx b/site/src/components/PaginationWidget/PaginationHeader.tsx
@@ -13,7 +13,7 @@ type PaginationHeaderProps = {
 	className?: string;
 };
 
-export const PaginationHeader: FC<PaginationHeaderProps> = ({
+export const PaginationAmount: FC<PaginationHeaderProps> = ({
 	paginationUnitLabel,
 	limit,
 	totalRecords,
@@ -30,7 +30,6 @@ export const PaginationHeader: FC<PaginationHeaderProps> = ({
 				alignItems: "center",
 				margin: 0,
 				fontSize: "13px",
-				paddingBottom: "8px",
 				color: theme.palette.text.secondary,
 				height: "36px", // The size of a small button
 				"& strong": {
diff --git a/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsPageView.tsx b/site/src/pages/AIBridgePage/RequestLogsPage/RequestLogsPageView.tsx
@@ -50,7 +50,6 @@ export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({
 			<PaginationContainer
 				query={interceptionsQuery}
 				paginationUnitLabel="interceptions"
-				paginationPosition="bottom"
 			>
 				<Table className="text-sm">
 					<TableHeader>
diff --git a/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx b/site/src/pages/WorkspacesPage/WorkspacesPageView.tsx
@@ -12,7 +12,7 @@ import {
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Margins } from "components/Margins/Margins";
 import { PageHeader, PageHeaderTitle } from "components/PageHeader/PageHeader";
-import { PaginationHeader } from "components/PaginationWidget/PaginationHeader";
+import { PaginationAmount } from "components/PaginationWidget/PaginationHeader";
 import { PaginationWidgetBase } from "components/PaginationWidget/PaginationWidgetBase";
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
@@ -196,12 +196,11 @@ export const WorkspacesPageView: FC<WorkspacesPageViewProps> = ({
 					</>
 				) : (
 					!pageNumberIsInvalid && (
-						<PaginationHeader
+						<PaginationAmount
 							paginationUnitLabel="workspaces"
 							limit={limit}
 							totalRecords={count}
 							currentOffsetStart={(page - 1) * limit + 1}
-							css={{ paddingBottom: "0" }}
 						/>
 					)
 				)}

Original file line number	Diff line number	Diff line change
`@@ -50,7 +50,6 @@ export const RequestLogsPageView: FC<RequestLogsPageViewProps> = ({`
`50`	`50`	`<PaginationContainer`
`51`	`51`	`query={interceptionsQuery}`
`52`	`52`	`paginationUnitLabel="interceptions"`
`53`		`- paginationPosition="bottom"`
`54`	`53`	`>`
`55`	`54`	`<Table className="text-sm">`
`56`	`55`	`<TableHeader>`