From b07317b0f72027e26223a5b54f265810f56cb981 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Sat, 8 Mar 2025 19:32:26 +0100
Subject: [PATCH] display pagination on top as well

---
 client/homebrew/pages/vaultPage/vaultPage.jsx  |  1 +
 client/homebrew/pages/vaultPage/vaultPage.less | 13 ++++++++++---
 2 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/homebrew/pages/vaultPage/vaultPage.jsx b/client/homebrew/pages/vaultPage/vaultPage.jsx
index 0725578a6..2078004cd 100644
--- a/client/homebrew/pages/vaultPage/vaultPage.jsx
+++ b/client/homebrew/pages/vaultPage/vaultPage.jsx
@@ -395,6 +395,7 @@ const VaultPage = (props)=>{
 					{`Brews found: `}
 					<span>{totalBrews}</span>
 				</span>
+				{brewCollection.length > 10 && renderPaginationControls()}
 				{brewCollection.map((brew, index)=>{
 					return (
 						<BrewItem
diff --git a/client/homebrew/pages/vaultPage/vaultPage.less b/client/homebrew/pages/vaultPage/vaultPage.less
index dfa99e22c..9a522cbfd 100644
--- a/client/homebrew/pages/vaultPage/vaultPage.less
+++ b/client/homebrew/pages/vaultPage/vaultPage.less
@@ -169,7 +169,7 @@
 				width            : 100%;
 				height           : 100%;
 				max-height       : 100%;
-				padding          : 50px 50px 70px 50px;
+				padding          : 70px 50px;
 				overflow-y       : scroll;
 				background-color : #2C3E50;
 				container-type   : inline-size;
@@ -280,25 +280,32 @@
 
 				.paginationControls {
 					position              : absolute;
+					top                   : 35px;
 					left                  : 50%;
 					display               : grid;
 					grid-template-areas   : 'previousPage currentPage nextPage';
 					grid-template-columns : 50px 1fr 50px;
+					gap:20px;
 					place-items           : center;
 					width                 : auto;
 					translate             : -50%;
+					font-size:15px;
+
+					&:last-child { top : unset; }
 
 					.pages {
 						display         : flex;
 						grid-area       : currentPage;
+						gap:1em;
 						justify-content : space-evenly;
 						width           : 100%;
 						height          : 100%;
-						padding         : 5px 8px;
 						text-align      : center;
 
 						.pageNumber {
-							margin-inline           : 1vw;
+							place-content:center;
+							min-width:2em;
+							width:fit-content;
 							font-family             : 'Open Sans';
 							font-weight             : 900;
 							color                   : white;