Merge pull request #3096 from metabrainz/ansh/fix-playlist-seach

fix: Render Annotations for Playlist on Search page

frontend/css/listens-page.less

@@ -505,19 +505,6 @@
   }
 }
 
-.ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.ellipsis-2-lines {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
 #spacer {
   margin-top: 54px;
 }

frontend/css/main.less

@@ -42,6 +42,7 @@
 @import "donations.less";
 @import "scroll-container.less";
 @import "flairs.less";
+@import "utilities.less";
 
 @icon-font-path: "/static/fonts/";
 

frontend/css/utilities.less

@@ -0,0 +1,20 @@
+.ellipsis {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.ellipsis-2-lines {
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ellipsis-4-lines {
+  display: -webkit-box;
+  -webkit-line-clamp: 4;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

frontend/js/src/search/PlaylistSearch.tsx

@@ -137,7 +137,13 @@ export default function PlaylistSearch(props: PlayListSearchProps) {
                       {playlist.title}
                     </Link>
                   </td>
-                  <td>{playlist?.annotation}</td>
+                  <td
+                    className="ellipsis-4-lines"
+                    // eslint-disable-next-line react/no-danger
+                    dangerouslySetInnerHTML={{
+                      __html: playlist?.annotation || "",
+                    }}
+                  />
                   <td>
                     <Link
                       to={`https://musicbrainz.org/user/${playlist?.creator}`}