From 27e9b959ab1afe26b060072103f6e94dbaac33c7 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 23 Dec 2025 14:24:03 -0800
Subject: [PATCH] match grid header/footer padding, use Button component for
 pagination

---
 .../database/DatabaseGridWithProvider.svelte  | 36 ++++---------------
 1 file changed, 6 insertions(+), 30 deletions(-)

diff --git a/src/lib/components/database/DatabaseGridWithProvider.svelte b/src/lib/components/database/DatabaseGridWithProvider.svelte
index 144e928d..2f7a3a13 100644
--- a/src/lib/components/database/DatabaseGridWithProvider.svelte
+++ b/src/lib/components/database/DatabaseGridWithProvider.svelte
@@ -472,21 +472,17 @@
 		</div>
 
 		<div class="pagination-controls">
-			<button class="pagination-button" onclick={handlePrevPage} disabled={currentPage <= 1}>
+			<Button variant="ghost" size="small" onclick={handlePrevPage} disabled={currentPage <= 1}>
 				Previous
-			</button>
+			</Button>
 
 			<span class="page-display">
 				Page {currentPage} of {totalPages}
 			</span>
 
-			<button
-				class="pagination-button"
-				onclick={handleNextPage}
-				disabled={currentPage >= totalPages}
-			>
+			<Button variant="ghost" size="small" onclick={handleNextPage} disabled={currentPage >= totalPages}>
 				Next
-			</button>
+			</Button>
 		</div>
 	</div>
 </div>
@@ -510,7 +506,7 @@
 			flex-wrap: wrap;
 			align-items: center;
 			justify-content: space-between;
-			padding: spacing.$unit;
+			padding: spacing.$unit-2x;
 			gap: spacing.$unit;
 
 			.controls-right {
@@ -638,7 +634,7 @@
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
-			padding: spacing.$unit;
+			padding: spacing.$unit-2x;
 			border-top: 1px solid #e5e5e5;
 			background: #f8f9fa;
 
@@ -652,26 +648,6 @@
 				align-items: center;
 				gap: spacing.$unit;
 
-				.pagination-button {
-					padding: spacing.$unit * 0.5 spacing.$unit;
-					background: white;
-					border: 1px solid #ddd;
-					border-radius: 4px;
-					font-size: typography.$font-small;
-					cursor: pointer;
-					transition: all 0.2s;
-
-					&:hover:not(:disabled) {
-						background: #e9ecef;
-						border-color: #adb5bd;
-					}
-
-					&:disabled {
-						opacity: 0.5;
-						cursor: not-allowed;
-					}
-				}
-
 				.page-display {
 					font-size: typography.$font-small;
 					color: #495057;