feat: add new mixin clamp-fade, and handler for expanding it in category description

closes #13322

public/scss/mixins.scss

@@ -111,6 +111,28 @@
 	}
 }
 
+// Use on elements with `line-clamp-*` classes
+@mixin clamp-fade($lines) {
+	position: relative;
+	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%);
+	}
+}
+
+@for $i from 1 through 6 {
+	.clamp-fade-#{$i} {
+		@include clamp-fade($i);
+	}
+}
+
 @each $color, $value in $grays {
 	.border-gray-#{$color} {
 		border-color: $value !important;

public/scss/modules/bottom-sheet.scss

@@ -45,6 +45,7 @@
 			width: auto;
 		}
 
+		// this does not look to be used anymore
 		.dropdown-backdrop {
 			background-color: rgba(0, 0, 0, .3);
 		}

public/src/client/category.js

@@ -41,6 +41,8 @@ define('forum/category', [
 
 		handleLoadMoreSubcategories();
 
+		handleDescription();
+
 		categorySelector.init($('[component="category-selector"]'), {
 			privilege: 'find',
 			parentCid: ajaxify.data.cid,
@@ -113,6 +115,18 @@ define('forum/category', [
 		});
 	}
 
+	function handleDescription() {
+		const fadeEl = document.querySelector('.description.clamp-fade-4');
+		if (!fadeEl) {
+			return;
+		}
+
+		fadeEl.addEventListener('click', () => {
+			const state = fadeEl.classList.contains('line-clamp-4');
+			fadeEl.classList.toggle('line-clamp-4', !state);
+		});
+	}
+
 	Category.toTop = function () {
 		navigator.scrollTop(0);
 	};