Stack link previews on mobile

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

@@ -166,7 +166,7 @@ export default class Card extends React.PureComponent {
     const provider    = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
     const interactive = card.get('type') !== 'link';
     const horizontal  = (!compact && cardWidth > cardHeight && (cardWidth + 100 >= width)) || interactive || embedded;
-    const className   = classnames('status-card', { horizontal, compact, interactive });
+    const className   = classnames('status-card', { horizontal, compact, interactive }, `status-card--${card.get('type')}`);
     const title       = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;
     const ratio       = this.getRatio(card);
     const height      = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);

app/styles/components/status.scss

@@ -637,6 +637,18 @@ a.status-card.compact:hover {
   background-position: center center;
 }
 
+@media (max-width: 600px) {
+  .status-card--link {
+    flex-direction: column;
+
+    .status-card__image {
+      width: 100%;
+      height: 200px;
+      flex: none;
+    }
+  }
+}
+
 .status__favicon {
   width: 16px;
   height: 16px;