Merge branch 'master' into develop

install/package.json

@@ -108,7 +108,7 @@
         "nodebb-plugin-spam-be-gone": "2.3.2",
         "nodebb-plugin-web-push": "0.7.7",
         "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,25 +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} {
-		// Fallback for older browsers
-		display: -webkit-box;
-		-webkit-line-clamp: $lines;
-		-webkit-box-orient: vertical;
-		overflow: hidden;
-
-		mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
-		-webkit-mask-image: linear-gradient(to bottom, black 60%, transparent 100%);
+		$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;
 		}