From 6fc89f69c1b99e67fa4d8f61685ed1689f2eca3f Mon Sep 17 00:00:00 2001
From: Nicolas Gotchac <ngotchac@gmail.com>
Date: Tue, 1 Nov 2016 17:47:02 +0100
Subject: [PATCH] Multiple line description for dapps and Masonry like layout
 (#2905) (#3058)

---
 js/src/ui/Container/Title/title.css |  9 +++++++--
 js/src/ui/Container/Title/title.js  |  8 +++++---
 js/src/views/Dapps/dapps.css        | 20 +++++---------------
 3 files changed, 17 insertions(+), 20 deletions(-)

diff --git a/js/src/ui/Container/Title/title.css b/js/src/ui/Container/Title/title.css
index ee5cc58cd..60baacff1 100644
--- a/js/src/ui/Container/Title/title.css
+++ b/js/src/ui/Container/Title/title.css
@@ -16,9 +16,14 @@
 */
 .byline {
   color: #aaa;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   overflow: hidden;
+  position: relative;
+  line-height: 1.2em;
+  max-height: 2.4em;
+
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 
 .title {
diff --git a/js/src/ui/Container/Title/title.js b/js/src/ui/Container/Title/title.js
index 0c0d0e6b3..03ba4be76 100644
--- a/js/src/ui/Container/Title/title.js
+++ b/js/src/ui/Container/Title/title.js
@@ -32,15 +32,17 @@ export default class Title extends Component {
   }
 
   render () {
-    const { className } = this.props;
+    const { className, title, byline } = this.props;
 
     return (
       <div className={ className }>
         <h3 className={ styles.title }>
-          { this.props.title }
+          { title }
         </h3>
         <div className={ styles.byline }>
-          <span title={ this.props.byline }>{ this.props.byline }</span>
+          <span title={ byline }>
+            { byline }
+          </span>
         </div>
       </div>
     );
diff --git a/js/src/views/Dapps/dapps.css b/js/src/views/Dapps/dapps.css
index 46cb0e9d4..718641929 100644
--- a/js/src/views/Dapps/dapps.css
+++ b/js/src/views/Dapps/dapps.css
@@ -15,8 +15,8 @@
 /* along with Parity.  If not, see <http://www.gnu.org/licenses/>.
 */
 .list {
-  display: flex;
-  flex-wrap: wrap;
+  column-count: 2;
+  column-gap: 0.25em;
 }
 
 .list+.list {
@@ -24,17 +24,7 @@
 }
 
 .item {
-  flex: 0 1 50%;
-  width: 50%;
-  position: relative;
-  box-sizing: border-box;
-  padding-bottom: 0.25em;
-}
-
-.item:nth-child(odd) {
-  padding-right: 0.125em;
-}
-
-.item:nth-child(even) {
-  padding-left: 0.125em;
+  display: inline-block;
+  margin: 0 0 0.25em;
+  width: 100%;
 }