From 70b349fd6f94b345af228d0c8401aba770e7ec96 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Tue, 21 Oct 2025 16:56:56 +0800
Subject: [PATCH 1/4] Adjust recommendations layout and styling

---
 src/css/support/blog.css               |  3 ++-
 src/partials/RecommendationPartial.vue |  2 +-
 src/support/heights.ts                 | 12 ++++++------
 tests/support/heights.test.ts          | 14 +++++++-------
 4 files changed, 16 insertions(+), 15 deletions(-)

diff --git a/src/css/support/blog.css b/src/css/support/blog.css
index 24209cc1..a5ee1850 100644
--- a/src/css/support/blog.css
+++ b/src/css/support/blog.css
@@ -14,7 +14,8 @@
 }
 
 .recommendations-list {
-	@apply h-96 overflow-y-auto pr-2;
+	height: 33.6rem;
+	@apply overflow-y-auto pr-2;
 	@apply scroll-smooth;
 }
 
diff --git a/src/partials/RecommendationPartial.vue b/src/partials/RecommendationPartial.vue
index a37d8417..db802fbe 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="recommendations-list space-y-8">
+		<ul class="recommendations-list custom-scrollbar space-y-8">
 			<!-- Item -->
 			<li v-for="item in paginatedRecommendations" :key="item.uuid" class="relative group">
 				<div class="flex items-start">
diff --git a/src/support/heights.ts b/src/support/heights.ts
index 8625b4fb..d3e9744d 100644
--- a/src/support/heights.ts
+++ b/src/support/heights.ts
@@ -9,13 +9,13 @@ export class Heights {
 	private static readonly minInResume = Object.freeze({
 		education: Object.freeze({ base: 26, lg: 28 }),
 		experience: Object.freeze({ base: 34, lg: 36 }),
-		recommendations: Object.freeze({ base: 30, lg: 32 }),
+		recommendations: Object.freeze({ base: 42, lg: 44.8 }),
 	} satisfies SectionMinMap);
 
 	private static readonly classesInResume = Object.freeze({
 		education: 'min-h-[26rem] lg:min-h-[28rem]',
 		experience: 'min-h-[34rem] lg:min-h-[36rem]',
-		recommendations: 'min-h-[30rem] lg:min-h-[32rem]',
+		recommendations: 'min-h-[42rem] lg:min-h-[44.8rem]',
 	} satisfies SectionClassMap);
 
 	private static readonly safeInResume = Object.freeze([
@@ -23,10 +23,10 @@ export class Heights {
 		'lg:min-h-[28rem]',
 		'min-h-[34rem]',
 		'lg:min-h-[36rem]',
-		'min-h-[30rem]',
-		'lg:min-h-[32rem]',
-		'min-h-[96rem]',
-		'lg:min-h-[102rem]',
+		'min-h-[42rem]',
+		'lg:min-h-[44.8rem]',
+		'min-h-[108rem]',
+		'lg:min-h-[114.8rem]',
 	] satisfies SectionSafe);
 
 	static resumeSectionMinHeights(): SectionMinMap {
diff --git a/tests/support/heights.test.ts b/tests/support/heights.test.ts
index 0ace0de1..80f9406d 100644
--- a/tests/support/heights.test.ts
+++ b/tests/support/heights.test.ts
@@ -9,7 +9,7 @@ describe('Heights', () => {
 		expect(min).toEqual({
 			education: { base: 26, lg: 28 },
 			experience: { base: 34, lg: 36 },
-			recommendations: { base: 30, lg: 32 },
+			recommendations: { base: 42, lg: 44.8 },
 		});
 		expect(Object.isFrozen(min)).toBe(true);
 		expect(Object.isFrozen(min.education)).toBe(true);
@@ -21,12 +21,12 @@ describe('Heights', () => {
 		expect(Heights.resumeSectionHeights()).toEqual({
 			education: 'min-h-[26rem] lg:min-h-[28rem]',
 			experience: 'min-h-[34rem] lg:min-h-[36rem]',
-			recommendations: 'min-h-[30rem] lg:min-h-[32rem]',
+			recommendations: 'min-h-[42rem] lg:min-h-[44.8rem]',
 		});
 	});
 
 	it('calculates the total resume sections min-height', () => {
-		expect(Heights.resumeSectionsTotalHeight()).toBe('min-h-[96rem] lg:min-h-[102rem]');
+		expect(Heights.resumeSectionsTotalHeight()).toBe('min-h-[108rem] lg:min-h-[114.8rem]');
 	});
 
 	it('exposes safelisted resume section classes for tailwind', () => {
@@ -35,10 +35,10 @@ describe('Heights', () => {
 			'lg:min-h-[28rem]',
 			'min-h-[34rem]',
 			'lg:min-h-[36rem]',
-			'min-h-[30rem]',
-			'lg:min-h-[32rem]',
-			'min-h-[96rem]',
-			'lg:min-h-[102rem]',
+			'min-h-[42rem]',
+			'lg:min-h-[44.8rem]',
+			'min-h-[108rem]',
+			'lg:min-h-[114.8rem]',
 		]);
 	});
 });

From 167325caa8799c691077e9c1c2b03321e7a5cca1 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Tue, 21 Oct 2025 17:02:30 +0800
Subject: [PATCH 2/4] Use CSS var for recommendations height

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

diff --git a/src/css/support/blog.css b/src/css/support/blog.css
index a5ee1850..a1e642f6 100644
--- a/src/css/support/blog.css
+++ b/src/css/support/blog.css
@@ -14,7 +14,7 @@
 }
 
 .recommendations-list {
-	height: 33.6rem;
+	height: calc(var(--recommendations-section-min, 42rem) * 0.8);
 	@apply overflow-y-auto pr-2;
 	@apply scroll-smooth;
 }
diff --git a/src/partials/RecommendationPartial.vue b/src/partials/RecommendationPartial.vue
index db802fbe..f9e9b795 100644
--- a/src/partials/RecommendationPartial.vue
+++ b/src/partials/RecommendationPartial.vue
@@ -1,5 +1,5 @@
 <template>
-	<section class="space-y-8">
+	<section class="space-y-8" :style="{ '--recommendations-section-min': recommendationsSectionMinHeight }">
 		<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" />
@@ -50,6 +50,7 @@ import { image, date } from '@/public.ts';
 import type { RecommendationsResponse } from '@api/response/recommendations-response.ts';
 import { renderMarkdown } from '@/support/markdown.ts';
 import { usePagination } from '@/support/pagination.ts';
+import { Heights } from '@/support/heights.ts';
 
 const props = defineProps<{
 	recommendations: Array<RecommendationsResponse>;
@@ -60,6 +61,8 @@ const { recommendations, backToTopTarget } = toRefs(props);
 
 const ITEMS_PER_PAGE = 3;
 
+const recommendationsSectionMinHeight = `${Heights.resumeSectionMinHeights().recommendations.base}rem`;
+
 const processedRecommendations = computed(() => {
 	return recommendations.value.map((item) => {
 		const sanitisedHtml = DOMPurify.sanitize(renderMarkdown(item.text));

From 659f6dd45f03e2e200b46b77e80a8c5af99472be Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Tue, 21 Oct 2025 17:09:52 +0800
Subject: [PATCH 3/4] Derive resume heights from shared min definitions

---
 src/support/heights.ts | 32 ++++++++++++++++----------------
 1 file changed, 16 insertions(+), 16 deletions(-)

diff --git a/src/support/heights.ts b/src/support/heights.ts
index d3e9744d..190c9833 100644
--- a/src/support/heights.ts
+++ b/src/support/heights.ts
@@ -12,22 +12,22 @@ export class Heights {
 		recommendations: Object.freeze({ base: 42, lg: 44.8 }),
 	} satisfies SectionMinMap);
 
-	private static readonly classesInResume = Object.freeze({
-		education: 'min-h-[26rem] lg:min-h-[28rem]',
-		experience: 'min-h-[34rem] lg:min-h-[36rem]',
-		recommendations: 'min-h-[42rem] lg:min-h-[44.8rem]',
-	} satisfies SectionClassMap);
-
-	private static readonly safeInResume = Object.freeze([
-		'min-h-[26rem]',
-		'lg:min-h-[28rem]',
-		'min-h-[34rem]',
-		'lg:min-h-[36rem]',
-		'min-h-[42rem]',
-		'lg:min-h-[44.8rem]',
-		'min-h-[108rem]',
-		'lg:min-h-[114.8rem]',
-	] satisfies SectionSafe);
+	private static get classesInResume(): SectionClassMap {
+		const buildClasses = (section: SectionMin) => `min-h-[${section.base}rem] lg:min-h-[${section.lg}rem]`;
+
+		return Object.freeze({
+			education: buildClasses(this.minInResume.education),
+			experience: buildClasses(this.minInResume.experience),
+			recommendations: buildClasses(this.minInResume.recommendations),
+		} satisfies SectionClassMap);
+	}
+
+	private static get safeInResume(): SectionSafe {
+		const sectionClasses = Object.values(this.classesInResume).flatMap((c) => c.split(' '));
+		const totalClasses = this.resumeSectionsTotalHeight().split(' ');
+
+		return Object.freeze([...sectionClasses, ...totalClasses]);
+	}
 
 	static resumeSectionMinHeights(): SectionMinMap {
 		return this.minInResume;

From 25638e3a9de739b43bcb07693742a098268e6295 Mon Sep 17 00:00:00 2001
From: Gus <gocanto@users.noreply.github.com>
Date: Tue, 21 Oct 2025 17:16:21 +0800
Subject: [PATCH 4/4] Refine recommendations min height binding

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

diff --git a/src/css/support/blog.css b/src/css/support/blog.css
index a1e642f6..c1969986 100644
--- a/src/css/support/blog.css
+++ b/src/css/support/blog.css
@@ -14,7 +14,7 @@
 }
 
 .recommendations-list {
-	height: calc(var(--recommendations-section-min, 42rem) * 0.8);
+	height: calc(var(--recommendations-section-min) * 0.8);
 	@apply overflow-y-auto pr-2;
 	@apply scroll-smooth;
 }
diff --git a/src/partials/RecommendationPartial.vue b/src/partials/RecommendationPartial.vue
index f9e9b795..d1a1f28d 100644
--- a/src/partials/RecommendationPartial.vue
+++ b/src/partials/RecommendationPartial.vue
@@ -1,5 +1,5 @@
 <template>
-	<section class="space-y-8" :style="{ '--recommendations-section-min': recommendationsSectionMinHeight }">
+	<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" />
@@ -61,7 +61,11 @@ const { recommendations, backToTopTarget } = toRefs(props);
 
 const ITEMS_PER_PAGE = 3;
 
+const RECOMMENDATIONS_SECTION_MIN_VARIABLE = '--recommendations-section-min';
 const recommendationsSectionMinHeight = `${Heights.resumeSectionMinHeights().recommendations.base}rem`;
+const recommendationsSectionStyle = computed(() => ({
+	[RECOMMENDATIONS_SECTION_MIN_VARIABLE]: recommendationsSectionMinHeight,
+}));
 
 const processedRecommendations = computed(() => {
 	return recommendations.value.map((item) => {