From 5d4703e86186833a3321d3e8d75047c674b7c7f6 Mon Sep 17 00:00:00 2001
From: ntnyq <ntnyq@foxmail.com>
Date: Mon, 27 Apr 2020 09:21:30 +0800
Subject: [PATCH] Fix grid item body overflow

---
 src/components/repository-grid/grid-item/index.js   | 2 +-
 src/components/repository-grid/grid-item/styles.css | 6 ++++++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/components/repository-grid/grid-item/index.js b/src/components/repository-grid/grid-item/index.js
index 6873568..2463835 100644
--- a/src/components/repository-grid/grid-item/index.js
+++ b/src/components/repository-grid/grid-item/index.js
@@ -41,7 +41,7 @@ class GridItem extends React.Component {
             </p>
           </div>
           <div className="repo-body">
-            <p>{ (this.props.repository.description && this.props.repository.description.slice(0, 140)) || 'No description given.' }</p>
+            <p title={this.props.repository.description}>{ (this.props.repository.description && this.props.repository.description.slice(0, 140)) || 'No description given.' }</p>
           </div>
           <div className="repo-footer">
             {
diff --git a/src/components/repository-grid/grid-item/styles.css b/src/components/repository-grid/grid-item/styles.css
index 1db6c42..99a1c27 100644
--- a/src/components/repository-grid/grid-item/styles.css
+++ b/src/components/repository-grid/grid-item/styles.css
@@ -86,10 +86,16 @@
 }
 
 .grid-item-container .repo-body p {
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+  max-height: 4.5em;
+  line-height: 1.5em;
   font-size: 14px;
   margin-bottom: 0;
   color: #6e7583;
   word-break: break-word;
+  overflow: hidden;
 }
 
 .grid-item-container .repo-footer {