From ae05de18af2261277898d2904c565e62d734b726 Mon Sep 17 00:00:00 2001
From: Igor Octaviano <igoroctaviano@gmail.com>
Date: Thu, 2 Jul 2020 11:41:53 -0300
Subject: [PATCH] Add truncate 2 lines class (#1853)

---
 platform/ui/src/components/StudyItem/StudyItem.jsx |  2 +-
 platform/ui/src/gatsby-theme-docz/tailwind.css     | 10 ++++++++++
 2 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/platform/ui/src/components/StudyItem/StudyItem.jsx b/platform/ui/src/components/StudyItem/StudyItem.jsx
index 421ced342..c0b3ee842 100644
--- a/platform/ui/src/components/StudyItem/StudyItem.jsx
+++ b/platform/ui/src/components/StudyItem/StudyItem.jsx
@@ -37,7 +37,7 @@ const StudyItem = ({
         </div>
         <div className="flex flex-row py-1">
           <div className="pr-5 text-xl text-blue-300">{modalities}</div>
-          <div className="text-base text-blue-300">{description}</div>
+          <div className="text-base text-blue-300 break-words truncate-2-lines">{description}</div>
         </div>
       </div>
       {!!trackedSeries && (
diff --git a/platform/ui/src/gatsby-theme-docz/tailwind.css b/platform/ui/src/gatsby-theme-docz/tailwind.css
index 2857865e6..c1d38a2ef 100644
--- a/platform/ui/src/gatsby-theme-docz/tailwind.css
+++ b/platform/ui/src/gatsby-theme-docz/tailwind.css
@@ -4,3 +4,13 @@
 
 /* IMPORT CUSTOM FONT */
 @import url('https://fonts.googleapis.com/css?family=Lato:300,400,700&display=swap');
+
+/* Trincate 2 lines utility */
+.truncate-2-lines {
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 1.3;
+  height: 2rem;
+}