Multiple line description for dapps and Masonry like layout (#2905) (#3058)

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 {

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>
     );

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%;
 }