fix: mask-image to use line-heights instead of hardcoded 60%

add line-fade-sm for text-sm

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",

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);
 	}
 }
 

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;
 		}