fix line clamping of HTML description (#1967)

* in the drawer description: remove max-height clamping fallback, unnecessary white-space rule, hide empty elements

* only enable max-height rule in browsers that don't support line clamp

Author: gumaerc

frontends/ol-components/src/components/LearningResourceExpanded/LearningResourceExpandedV2.tsx

@@ -174,13 +174,17 @@ const Description = styled.p({
   ...theme.typography.body2,
   color: theme.custom.colors.black,
   margin: 0,
-  whiteSpace: "pre-wrap",
   wordBreak: "break-word",
-  "p:first-child": {
-    marginTop: 0,
-  },
-  "p:last-child": {
-    marginBottom: 0,
+  "> *": {
+    ":first-child": {
+      marginTop: 0,
+    },
+    ":last-child": {
+      marginBottom: 0,
+    },
+    ":empty": {
+      display: "none",
+    },
   },
 })
 
@@ -189,6 +193,7 @@ const DescriptionCollapsed = styled(Description)({
   overflow: "hidden",
   maxHeight: `calc(${theme.typography.body2.lineHeight} * 5)`,
   "@supports (-webkit-line-clamp: 5)": {
+    maxHeight: "unset",
     WebkitLineClamp: 5,
     WebkitBoxOrient: "vertical",
   },