From a0283ff775d4292b624339cb2d65bef479fa7c0b Mon Sep 17 00:00:00 2001
From: Jeremy Ruppel <jeremyruppel@users.noreply.github.com>
Date: Thu, 26 Mar 2026 09:50:49 -0400
Subject: [PATCH] fix(site): use `toLocaleString` for pagination offsets
 (#23669)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The Pagination widget localizes the number format of the total results
but not the page offsets.

Before

<img width="620" height="78" alt="Screenshot 2026-03-26 at 09 18 01"
src="https://github.com/user-attachments/assets/7ac0ad9a-7baa-4b30-b3d0-0e0325f8433b"
/>

After

<img width="297" height="42" alt="Screenshot 2026-03-26 at 9 41 22 AM"
src="https://github.com/user-attachments/assets/79c68366-95fa-4012-8419-5cd6f6e10ae3"
/>
---
 .../PaginationWidget/PaginationAmount.tsx        |  8 +++++---
 .../PaginationContainer.stories.tsx              | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/site/src/components/PaginationWidget/PaginationAmount.tsx b/site/src/components/PaginationWidget/PaginationAmount.tsx
index 204825cfb7..5e9f62b3af 100644
--- a/site/src/components/PaginationWidget/PaginationAmount.tsx
+++ b/site/src/components/PaginationWidget/PaginationAmount.tsx
@@ -48,10 +48,12 @@ export const PaginationAmount: FC<PaginationHeaderProps> = ({
 
 					{totalRecords !== 0 && currentOffsetStart !== undefined && (
 						<div>
-							Showing <strong>{currentOffsetStart}</strong> to{" "}
+							Showing <strong>{currentOffsetStart.toLocaleString()}</strong> to{" "}
 							<strong>
-								{currentOffsetStart +
-									Math.min(limit - 1, totalRecords - currentOffsetStart)}
+								{(
+									currentOffsetStart +
+									Math.min(limit - 1, totalRecords - currentOffsetStart)
+								).toLocaleString()}
 							</strong>{" "}
 							of <strong>{totalRecords.toLocaleString()}</strong>{" "}
 							{paginationUnitLabel}
diff --git a/site/src/components/PaginationWidget/PaginationContainer.stories.tsx b/site/src/components/PaginationWidget/PaginationContainer.stories.tsx
index a07800108f..23ea7700b7 100644
--- a/site/src/components/PaginationWidget/PaginationContainer.stories.tsx
+++ b/site/src/components/PaginationWidget/PaginationContainer.stories.tsx
@@ -86,6 +86,22 @@ export const FirstPageWithNoData: Story = {
 	},
 };
 
+export const FirstPageWithTonsOfData: Story = {
+	args: {
+		query: {
+			...mockPaginationResultBase,
+			isSuccess: true,
+			currentPage: 2,
+			currentOffsetStart: 1000,
+			totalRecords: 123_456,
+			totalPages: 1235,
+			hasPreviousPage: false,
+			hasNextPage: true,
+			isPlaceholderData: false,
+		},
+	},
+};
+
 export const TransitionFromFirstToSecondPage: Story = {
 	args: {
 		query: {