From c2b0d35afc11991c7c74745738532da9af49b72b Mon Sep 17 00:00:00 2001
From: Mloweedgar <mloweedgar0@gmail.com>
Date: Tue, 24 Apr 2018 16:55:44 +0300
Subject: [PATCH] Fix #2610: clipped card's long description using lodash
 trancate method

---
 web/client/components/catalog/RecordItem.css | 5 -----
 web/client/components/catalog/RecordItem.jsx | 6 +++++-
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/web/client/components/catalog/RecordItem.css b/web/client/components/catalog/RecordItem.css
index 63a4547eec..148be12b28 100644
--- a/web/client/components/catalog/RecordItem.css
+++ b/web/client/components/catalog/RecordItem.css
@@ -27,11 +27,6 @@
     overflow: hidden;
 }
 
-.record-item-description {
-    width: 350px;
-    white-space: nowrap;
-}
-
 .record-item .preview{
     float: left;
     width: 150px;
diff --git a/web/client/components/catalog/RecordItem.jsx b/web/client/components/catalog/RecordItem.jsx
index a5d8049e2d..0dbea49b7e 100644
--- a/web/client/components/catalog/RecordItem.jsx
+++ b/web/client/components/catalog/RecordItem.jsx
@@ -135,6 +135,10 @@ class RecordItem extends React.Component {
         }
     };
 
+    truncateDescription(description,size){
+        return _.truncate(description, {'length': size, 'separator': /,? +/})
+    }
+
     render() {
         let record = this.props.record;
         return (
@@ -143,7 +147,7 @@ class RecordItem extends React.Component {
                 <div>
                     <h4 className="truncateText">{record && this.getTitle(record.title)}</h4>
                     <h4 className="truncateText"><small>{record && record.identifier}</small></h4>
-                    <p className="truncateText record-item-description" style={{display: 'block'}}>{this.renderDescription(record)}</p>
+                    <p className="truncateText record-item-description">{this.truncateDescription(this.renderDescription(record), 70)}</p>
                 </div>
                   {this.renderButtons(record)}
             </Panel>