From 055a4d3ba7c8bc861b431f97acab164b727e9436 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Wed, 22 Oct 2025 09:29:49 +0800
Subject: [PATCH 1/5] Align pagination buttons with back to top styling

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

diff --git a/src/components/PaginationControls.vue b/src/components/PaginationControls.vue
index e93b5773..5da97805 100644
--- a/src/components/PaginationControls.vue
+++ b/src/components/PaginationControls.vue
@@ -2,10 +2,20 @@
 	<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 paginatation-buttons" :disabled="isFirstPage" @click="$emit('previous')">
+			<button
+				type="button"
+				class="inline-flex items-center gap-2 rounded-full border border-slate-200/70 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 disabled:cursor-not-allowed disabled:opacity-60 dark:border-slate-700/80 dark:text-slate-300 dark:hover:text-slate-100"
+				:disabled="isFirstPage"
+				@click="$emit('previous')"
+			>
 				{{ previousLabel }}
 			</button>
-			<button type="button" class="btn paginatation-buttons" :disabled="isLastPage" @click="$emit('next')">
+			<button
+				type="button"
+				class="inline-flex items-center gap-2 rounded-full border border-slate-200/70 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 disabled:cursor-not-allowed disabled:opacity-60 dark:border-slate-700/80 dark:text-slate-300 dark:hover:text-slate-100"
+				:disabled="isLastPage"
+				@click="$emit('next')"
+			>
 				{{ nextLabel }}
 			</button>
 		</div>
diff --git a/src/css/support/blog.css b/src/css/support/blog.css
index c1969986..3ae3d584 100644
--- a/src/css/support/blog.css
+++ b/src/css/support/blog.css
@@ -4,15 +4,6 @@
 	@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;
-}
-
 .recommendations-list {
 	height: calc(var(--recommendations-section-min) * 0.8);
 	@apply overflow-y-auto pr-2;

From 374de5e9a853ea5a6ee8269cd29aa1efd7b8b0de Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Wed, 22 Oct 2025 09:44:40 +0800
Subject: [PATCH 2/5] Refactor pill button styles

---
 src/components/PaginationControls.vue | 14 ++------------
 src/css/support/utility-patterns.css  |  8 ++++++++
 src/partials/BackToTopLink.vue        |  5 +----
 3 files changed, 11 insertions(+), 16 deletions(-)

diff --git a/src/components/PaginationControls.vue b/src/components/PaginationControls.vue
index 5da97805..4fd50eb6 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="inline-flex items-center gap-2 rounded-full border border-slate-200/70 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 disabled:cursor-not-allowed disabled:opacity-60 dark:border-slate-700/80 dark:text-slate-300 dark:hover:text-slate-100"
-				:disabled="isFirstPage"
-				@click="$emit('previous')"
-			>
+			<button type="button" class="pill-button" :disabled="isFirstPage" @click="$emit('previous')">
 				{{ previousLabel }}
 			</button>
-			<button
-				type="button"
-				class="inline-flex items-center gap-2 rounded-full border border-slate-200/70 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 disabled:cursor-not-allowed disabled:opacity-60 dark:border-slate-700/80 dark:text-slate-300 dark:hover:text-slate-100"
-				:disabled="isLastPage"
-				@click="$emit('next')"
-			>
+			<button type="button" class="pill-button" :disabled="isLastPage" @click="$emit('next')">
 				{{ nextLabel }}
 			</button>
 		</div>
diff --git a/src/css/support/utility-patterns.css b/src/css/support/utility-patterns.css
index 9195bb25..b74b4f0d 100644
--- a/src/css/support/utility-patterns.css
+++ b/src/css/support/utility-patterns.css
@@ -43,6 +43,14 @@
 	@apply px-3 py-1.5 text-indigo-100 bg-indigo-500 hover:bg-indigo-600;
 }
 
+.pill-button {
+	@apply inline-flex items-center gap-2 rounded-full border border-slate-200/70 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 dark:border-slate-700/80 dark:text-slate-300 dark:hover:text-slate-100;
+}
+
+.pill-button:disabled {
+	@apply cursor-not-allowed opacity-60;
+}
+
 /* Forms */
 input[type='search']::-webkit-search-decoration,
 input[type='search']::-webkit-search-cancel-button,
diff --git a/src/partials/BackToTopLink.vue b/src/partials/BackToTopLink.vue
index cc6987d7..ef91d6a1 100644
--- a/src/partials/BackToTopLink.vue
+++ b/src/partials/BackToTopLink.vue
@@ -1,8 +1,5 @@
 <template>
-	<a
-		class="inline-flex items-center gap-2 rounded-full border border-slate-200/70 px-4 py-2 text-sm font-medium text-slate-600 transition-colors hover:border-fuchsia-400/70 hover:text-slate-800 dark:border-slate-700/80 dark:text-slate-300 dark:hover:text-slate-100"
-		:href="target"
-	>
+	<a class="pill-button" :href="target">
 		<span aria-hidden="true">{{ icon }}</span>
 		{{ label }}
 	</a>

From f058cdba5928982c89d2eb9222224f5cd0f59f92 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Wed, 22 Oct 2025 09:51:04 +0800
Subject: [PATCH 3/5] Improve dark mode scroll indicator

---
 src/css/support/blog.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/support/blog.css b/src/css/support/blog.css
index 3ae3d584..294c0c10 100644
--- a/src/css/support/blog.css
+++ b/src/css/support/blog.css
@@ -7,7 +7,7 @@
 .recommendations-list {
 	height: calc(var(--recommendations-section-min) * 0.8);
 	@apply overflow-y-auto pr-2;
-	@apply scroll-smooth;
+	@apply scroll-smooth custom-scrollbar;
 }
 
 .blog-h1 {

From ece9e1a29ad00a77d379422cb395af65b876db3b Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Wed, 22 Oct 2025 09:59:38 +0800
Subject: [PATCH 4/5] Increase recommendation list height

---
 src/css/support/blog.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/css/support/blog.css b/src/css/support/blog.css
index 294c0c10..4898781d 100644
--- a/src/css/support/blog.css
+++ b/src/css/support/blog.css
@@ -5,7 +5,7 @@
 }
 
 .recommendations-list {
-	height: calc(var(--recommendations-section-min) * 0.8);
+	height: calc(var(--recommendations-section-min) * 1.04);
 	@apply overflow-y-auto pr-2;
 	@apply scroll-smooth custom-scrollbar;
 }

From 96908ae9f7e2bdea48d8b5fbaeedfc0159ea6b8b Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Wed, 22 Oct 2025 10:11:31 +0800
Subject: [PATCH 5/5] Remove recommendations back to top link

---
 src/pages/ResumePage.vue                     | 2 +-
 src/partials/RecommendationPartial.vue       | 5 +----
 tests/partials/RecommendationPartial.test.ts | 5 ++---
 3 files changed, 4 insertions(+), 8 deletions(-)

diff --git a/src/pages/ResumePage.vue b/src/pages/ResumePage.vue
index 54c96cac..c3cb88de 100644
--- a/src/pages/ResumePage.vue
+++ b/src/pages/ResumePage.vue
@@ -44,7 +44,7 @@
 											</div>
 											<div :class="resumeSectionHeights.recommendations">
 												<span id="recommendations" class="block h-0" aria-hidden="true"></span>
-												<RecommendationPartial v-if="recommendations" :recommendations="recommendations" back-to-top-target="#resume-top" />
+												<RecommendationPartial v-if="recommendations" :recommendations="recommendations" />
 											</div>
 										</div>
 									</div>
diff --git a/src/partials/RecommendationPartial.vue b/src/partials/RecommendationPartial.vue
index d1a1f28d..dcafc851 100644
--- a/src/partials/RecommendationPartial.vue
+++ b/src/partials/RecommendationPartial.vue
@@ -2,7 +2,6 @@
 	<section class="space-y-8" :style="recommendationsSectionStyle">
 		<div class="flex flex-wrap items-center justify-between gap-4">
 			<h2 class="h3 font-aspekta text-slate-800 dark:text-slate-100">Recommendations</h2>
-			<BackToTopLink :target="backToTopTarget" />
 		</div>
 		<ul class="recommendations-list custom-scrollbar space-y-8">
 			<!-- Item -->
@@ -44,7 +43,6 @@
 <script setup lang="ts">
 import { computed, toRefs } from 'vue';
 import DOMPurify from 'dompurify';
-import BackToTopLink from '@partials/BackToTopLink.vue';
 import PaginationControls from '@components/PaginationControls.vue';
 import { image, date } from '@/public.ts';
 import type { RecommendationsResponse } from '@api/response/recommendations-response.ts';
@@ -54,10 +52,9 @@ import { Heights } from '@/support/heights.ts';
 
 const props = defineProps<{
 	recommendations: Array<RecommendationsResponse>;
-	backToTopTarget: string;
 }>();
 
-const { recommendations, backToTopTarget } = toRefs(props);
+const { recommendations } = toRefs(props);
 
 const ITEMS_PER_PAGE = 3;
 
diff --git a/tests/partials/RecommendationPartial.test.ts b/tests/partials/RecommendationPartial.test.ts
index c1919183..ec110ff6 100644
--- a/tests/partials/RecommendationPartial.test.ts
+++ b/tests/partials/RecommendationPartial.test.ts
@@ -30,7 +30,7 @@ describe('RecommendationPartial', () => {
 
 	it('sanitises and formats recommendation', () => {
 		const wrapper = mount(RecommendationPartial, {
-			props: { recommendations: data, backToTopTarget: '#top' },
+			props: { recommendations: data },
 		});
 		expect(renderMarkdown).toHaveBeenCalledWith('**great**');
 		expect(wrapper.html()).toContain('<strong>great</strong>');
@@ -51,7 +51,6 @@ describe('RecommendationPartial', () => {
 						},
 					},
 				],
-				backToTopTarget: '#top',
 			},
 		});
 
@@ -69,7 +68,7 @@ describe('RecommendationPartial', () => {
 		}));
 
 		const wrapper = mount(RecommendationPartial, {
-			props: { recommendations, backToTopTarget: '#top' },
+			props: { recommendations },
 		});
 
 		const pageIndicator = () => wrapper.get('[aria-label="Recommendations pagination"] p');