From 14280a21db2fa92c1660f36154c8f60b93851721 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Tue, 21 Oct 2025 16:05:17 +0800
Subject: [PATCH 1/3] Adjust pagination controls styling

---
 src/components/PaginationControls.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/PaginationControls.vue b/src/components/PaginationControls.vue
index acd3aa38..108371ac 100644
--- a/src/components/PaginationControls.vue
+++ b/src/components/PaginationControls.vue
@@ -1,10 +1,10 @@
 <template>
-	<nav v-if="totalPages > 1" class="flex flex-wrap items-center justify-end gap-3 text-sm text-slate-500 dark:text-slate-400" :aria-label="ariaLabel">
+	<nav v-if="totalPages > 1" class="flex flex-wrap items-center justify-start gap-3 text-sm text-slate-500 dark:text-slate-400" :aria-label="ariaLabel">
 		<p class="font-medium">Page {{ currentPage }} of {{ totalPages }}</p>
 		<div class="flex items-center gap-2">
 			<button
 				type="button"
-				class="btn btn-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 hover:border-fuchsia-400/70 hover:text-slate-800 dark:hover:text-slate-100 disabled:cursor-not-allowed disabled:opacity-50"
+				class="btn h-10 w-32 cursor-pointer border border-fuchsia-500 bg-fuchsia-500 text-white transition-colors duration-150 ease-in-out hover:bg-fuchsia-500/90 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-300 dark:border-teal-500 dark:bg-teal-600 dark:text-slate-900 dark:hover:bg-teal-500 disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-200 disabled:text-slate-400 dark:disabled:border-slate-700 dark:disabled:bg-slate-700 dark:disabled:text-slate-500"
 				:disabled="isFirstPage"
 				@click="$emit('previous')"
 			>
@@ -12,7 +12,7 @@
 			</button>
 			<button
 				type="button"
-				class="btn btn-sm border border-slate-200 dark:border-slate-700 text-slate-700 dark:text-slate-200 hover:border-fuchsia-400/70 hover:text-slate-800 dark:hover:text-slate-100 disabled:cursor-not-allowed disabled:opacity-50"
+				class="btn h-10 w-32 cursor-pointer border border-fuchsia-500 bg-fuchsia-500 text-white transition-colors duration-150 ease-in-out hover:bg-fuchsia-500/90 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-300 dark:border-teal-500 dark:bg-teal-600 dark:text-slate-900 dark:hover:bg-teal-500 disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-200 disabled:text-slate-400 dark:disabled:border-slate-700 dark:disabled:bg-slate-700 dark:disabled:text-slate-500"
 				:disabled="isLastPage"
 				@click="$emit('next')"
 			>

From 931221efa4e3c5707f4d493c564c520e32a66ea1 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Tue, 21 Oct 2025 16:13:09 +0800
Subject: [PATCH 2/3] Extract pagination button utility class

---
 src/components/PaginationControls.vue | 14 ++------------
 src/css/support/blog.css              |  9 +++++++++
 2 files changed, 11 insertions(+), 12 deletions(-)

diff --git a/src/components/PaginationControls.vue b/src/components/PaginationControls.vue
index 108371ac..e93b5773 100644
--- a/src/components/PaginationControls.vue
+++ b/src/components/PaginationControls.vue
@@ -2,20 +2,10 @@
 	<nav v-if="totalPages > 1" class="flex flex-wrap items-center justify-start gap-3 text-sm text-slate-500 dark:text-slate-400" :aria-label="ariaLabel">
 		<p class="font-medium">Page {{ currentPage }} of {{ totalPages }}</p>
 		<div class="flex items-center gap-2">
-			<button
-				type="button"
-				class="btn h-10 w-32 cursor-pointer border border-fuchsia-500 bg-fuchsia-500 text-white transition-colors duration-150 ease-in-out hover:bg-fuchsia-500/90 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-300 dark:border-teal-500 dark:bg-teal-600 dark:text-slate-900 dark:hover:bg-teal-500 disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-200 disabled:text-slate-400 dark:disabled:border-slate-700 dark:disabled:bg-slate-700 dark:disabled:text-slate-500"
-				:disabled="isFirstPage"
-				@click="$emit('previous')"
-			>
+			<button type="button" class="btn paginatation-buttons" :disabled="isFirstPage" @click="$emit('previous')">
 				{{ previousLabel }}
 			</button>
-			<button
-				type="button"
-				class="btn h-10 w-32 cursor-pointer border border-fuchsia-500 bg-fuchsia-500 text-white transition-colors duration-150 ease-in-out hover:bg-fuchsia-500/90 hover:text-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-300 dark:border-teal-500 dark:bg-teal-600 dark:text-slate-900 dark:hover:bg-teal-500 disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-200 disabled:text-slate-400 dark:disabled:border-slate-700 dark:disabled:bg-slate-700 dark:disabled:text-slate-500"
-				:disabled="isLastPage"
-				@click="$emit('next')"
-			>
+			<button type="button" class="btn paginatation-buttons" :disabled="isLastPage" @click="$emit('next')">
 				{{ nextLabel }}
 			</button>
 		</div>
diff --git a/src/css/support/blog.css b/src/css/support/blog.css
index 66305817..ac098366 100644
--- a/src/css/support/blog.css
+++ b/src/css/support/blog.css
@@ -4,6 +4,15 @@
 	@apply dark:text-teal-500 dark:hover:text-teal-600;
 }
 
+.paginatation-buttons {
+	@apply h-10 w-32 cursor-pointer border border-fuchsia-500 bg-fuchsia-500 text-white;
+	@apply transition-colors duration-150 ease-in-out hover:bg-fuchsia-500/90 hover:text-white;
+	@apply focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fuchsia-300;
+	@apply dark:border-teal-500 dark:bg-teal-600 dark:text-slate-900 dark:hover:bg-teal-500;
+	@apply disabled:cursor-not-allowed disabled:border-slate-200 disabled:bg-slate-200 disabled:text-slate-400;
+	@apply dark:disabled:border-slate-700 dark:disabled:bg-slate-700 dark:disabled:text-slate-500;
+}
+
 .blog-h1 {
 	@apply font-aspekta mb-5;
 	@apply text-slate-700 dark:text-slate-300;

From 7498553bde12e02efffc78ad4e4adf2d6da94e74 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Tue, 21 Oct 2025 16:18:30 +0800
Subject: [PATCH 3/3] Make recommendations list scrollable

---
 src/css/support/blog.css               | 5 +++++
 src/partials/RecommendationPartial.vue | 2 +-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/css/support/blog.css b/src/css/support/blog.css
index ac098366..24209cc1 100644
--- a/src/css/support/blog.css
+++ b/src/css/support/blog.css
@@ -13,6 +13,11 @@
 	@apply dark:disabled:border-slate-700 dark:disabled:bg-slate-700 dark:disabled:text-slate-500;
 }
 
+.recommendations-list {
+	@apply h-96 overflow-y-auto pr-2;
+	@apply scroll-smooth;
+}
+
 .blog-h1 {
 	@apply font-aspekta mb-5;
 	@apply text-slate-700 dark:text-slate-300;
diff --git a/src/partials/RecommendationPartial.vue b/src/partials/RecommendationPartial.vue
index 31203781..a37d8417 100644
--- a/src/partials/RecommendationPartial.vue
+++ b/src/partials/RecommendationPartial.vue
@@ -4,7 +4,7 @@
 			<h2 class="h3 font-aspekta text-slate-800 dark:text-slate-100">Recommendations</h2>
 			<BackToTopLink :target="backToTopTarget" />
 		</div>
-		<ul class="space-y-8">
+		<ul class="recommendations-list space-y-8">
 			<!-- Item -->
 			<li v-for="item in paginatedRecommendations" :key="item.uuid" class="relative group">
 				<div class="flex items-start">