Improve link previews

app/soapbox/features/status/components/card.js

@@ -67,7 +67,7 @@ export default class Card extends React.PureComponent {
   };
 
   static defaultProps = {
-    maxDescription: 50,
+    maxDescription: 200,
     compact: false,
   };
 
@@ -174,8 +174,8 @@ export default class Card extends React.PureComponent {
     const description = (
       <div className='status-card__content'>
         {title}
-        {!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
+        <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>
-        <span className='status-card__host'>{provider}</span>
+        <span className='status-card__host'><Icon id='link' /> {provider}</span>
       </div>
     );
 
@@ -221,7 +221,7 @@ export default class Card extends React.PureComponent {
       );
     } else {
       embed = (
-        <div className='status-card__image'>
+        <div className='status-card__image status-card__image--empty'>
           <Icon id='file-text' />
         </div>
       );

app/styles/components/status.scss

@@ -476,6 +476,7 @@
   border-radius: 4px;
   color: var(--primary-text-color);
   margin-top: 14px;
+  min-height: 150px;
   text-decoration: none;
   overflow: hidden;
 
@@ -552,19 +553,17 @@ a.status-card {
 
 .status-card__title {
   display: block;
+  font-size: 16px;
   font-weight: 500;
-  margin-bottom: 5px;
+  margin-bottom: 10px;
-  color: var(--primary-text-color--faint);
+  color: var(--primary-text-color);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
   text-decoration: none;
 }
 
 .status-card__content {
   flex: 1 1 auto;
   overflow: hidden;
-  padding: 14px 14px 14px 8px;
+  padding: 16px;
 }
 
 .status-card__description {
@@ -573,7 +572,7 @@ a.status-card {
 
 .status-card__host {
   display: block;
-  margin-top: 5px;
+  margin-top: 10px;
   font-size: 13px;
   overflow: hidden;
   text-overflow: ellipsis;
@@ -581,7 +580,7 @@ a.status-card {
 }
 
 .status-card__image {
-  flex: 0 0 100px;
+  flex: 0 0 40%;
   background: var(--brand-color--med);
   position: relative;
 
@@ -593,6 +592,10 @@ a.status-card {
     left: 50%;
     transform: translate(-50%, -50%);
   }
+
+  &--empty {
+    flex: 0 0 80px;
+  }
 }
 
 .status-card.horizontal {
@@ -617,19 +620,6 @@ a.status-card {
   &.interactive {
     border: 0;
   }
-
-  .status-card__content {
-    padding: 8px;
-    padding-top: 10px;
-  }
-
-  .status-card__title {
-    white-space: nowrap;
-  }
-
-  .status-card__image {
-    flex: 0 0 60px;
-  }
 }
 
 a.status-card.compact:hover {