Changed Horizontal Split to be vertical + Whitespace to linebreak descriptions.

client/scss/asset-display/_asset-display.scss

@@ -20,3 +20,7 @@
 .vertical-split .asset-display {
     height: 90vh;
 }
+
+.asset-description {
+  white-space: pre-line;
+}

client/src/containers/AssetInfo/view.jsx

@@ -12,6 +12,13 @@ class AssetInfo extends React.Component {
     const { asset: { shortId, claimData : { channelName, certificateId, description, name, claimId, fileExt, contentType, thumbnail, host } } } = this.props;
     return (
       <div>
+
+        {description && (
+          <Row>
+            <p class='asset-description'>{description}</p>
+          </Row>
+        )}
+
         {channelName && (
           <Row>
             <RowLabeled
@@ -104,12 +111,6 @@ class AssetInfo extends React.Component {
           </SpaceBetween>
         </Row>
 
-        {description && (
-          <Row>
-            <p>{description}</p>
-          </Row>
-        )}
-
         <Row>
           <p>
             Hosted via the <a className={'link--primary'} href={'https://lbry.io/get'} target={'_blank'}>LBRY</a> blockchain

client/src/pages/ShowAssetDetails/view.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PageLayout from '@components/PageLayout';
 
-import HorizontalSplit from '@components/HorizontalSplit';
+import VerticalSplit from '@components/VerticalSplit';
 import AssetTitle from '@containers/AssetTitle';
 import AssetDisplay from '@containers/AssetDisplay';
 import AssetInfo from '@containers/AssetInfo';
@@ -18,9 +18,9 @@ class ShowAssetDetails extends React.Component {
           asset={asset}
         >
           <AssetTitle />
-          <HorizontalSplit
-            leftSide={<AssetDisplay />}
-            rightSide={<AssetInfo />}
+          <VerticalSplit
+            top={<AssetDisplay />}
+            bottom={<AssetInfo />}
           />
         </PageLayout>
       );