feat: Improve Playlist description overflow

metabrainz · Jan 8, 2025 · 04c5eaf · 04c5eaf
1 parent 300e17a
commit 04c5eaf
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 13 deletions.
diff --git a/frontend/css/listens-page.less b/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;
 }

diff --git a/frontend/css/main.less b/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/";
 

diff --git a/frontend/css/utilities.less b/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;
+}
diff --git a/frontend/js/src/search/PlaylistSearch.tsx b/frontend/js/src/search/PlaylistSearch.tsx
@@ -138,6 +138,7 @@ export default function PlaylistSearch(props: PlayListSearchProps) {
                     </Link>
                   </td>
                   <td
+                    className="ellipsis-4-lines"
                     // eslint-disable-next-line react/no-danger
                     dangerouslySetInnerHTML={{
                       __html: playlist?.annotation || "",