From 2e21d21475724db6b0d46e783b3493be8acabfdc Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Bar=C4=B1=C5=9F=20Soner=20U=C5=9Fakl=C4=B1?=
 <barisusakli@gmail.com>
Date: Tue, 10 Mar 2026 19:55:30 -0400
Subject: [PATCH] fix: mask-image to use line-heights instead of hardcoded 60%

add line-fade-sm for text-sm
---
 install/package.json          |  2 +-
 public/scss/mixins.scss       | 27 ++++++++++++++++-----------
 public/src/client/category.js |  2 +-
 3 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/install/package.json b/install/package.json
index 9e2fdfcf2b..170affdcbf 100644
--- a/install/package.json
+++ b/install/package.json
@@ -107,7 +107,7 @@
         "nodebb-plugin-spam-be-gone": "2.3.2",
         "nodebb-plugin-web-push": "0.7.6",
         "nodebb-rewards-essentials": "1.0.2",
-        "nodebb-theme-harmony": "2.2.50",
+        "nodebb-theme-harmony": "2.2.51",
         "nodebb-theme-lavender": "7.1.21",
         "nodebb-theme-peace": "2.2.56",
         "nodebb-theme-persona": "14.2.27",
diff --git a/public/scss/mixins.scss b/public/scss/mixins.scss
index 4c75a264c5..e48a711a59 100644
--- a/public/scss/mixins.scss
+++ b/public/scss/mixins.scss
@@ -112,24 +112,29 @@
 }
 
 // Use on elements with `line-clamp-*` classes
-@mixin clamp-fade($lines) {
-	position: relative;
+@mixin clamp-fade($lines, $line-height) {
 	cursor: pointer;
 
-	&.line-clamp-#{$lines}::before {
-		content: '';
-		position: absolute;
-		top: calc(1.5em * ($lines - 2));
-		display: block;
-		width: 100%;
-		height: 3em;
-		background: linear-gradient(180deg, transparent 0, $body-bg 100%);
+	&.line-clamp-#{$lines} {
+		$solid-threshold: calc(#{$line-height} * (#{$lines} - 1.0));
+		$total-height: calc(#{$line-height} * #{$lines});
+		$gradient: linear-gradient(
+			to bottom,
+			black 0px,
+			black #{$solid-threshold},
+			transparent #{$total-height}
+		);
+		mask-image: $gradient;
+		-webkit-mask-image: $gradient;
 	}
 }
 
 @for $i from 1 through 6 {
 	.clamp-fade-#{$i} {
-		@include clamp-fade($i);
+		@include clamp-fade($i, #{$line-height-base}em);
+	}
+	.clamp-fade-sm-#{$i} {
+		@include clamp-fade($i, #{$line-height-sm}em);
 	}
 }
 
diff --git a/public/src/client/category.js b/public/src/client/category.js
index 9ae2152b41..1e950e8983 100644
--- a/public/src/client/category.js
+++ b/public/src/client/category.js
@@ -115,7 +115,7 @@ define('forum/category', [
 	}
 
 	function handleDescription() {
-		const fadeEl = document.querySelector('.description.clamp-fade-4');
+		const fadeEl = document.querySelector(`.description.clamp-fade-sm-4`);
 		if (!fadeEl) {
 			return;
 		}