From 77ad89bc483b836b6a736e51c9ac5b5d26a7e6ee Mon Sep 17 00:00:00 2001
From: Alex Gleason <alex@alexgleason.me>
Date: Wed, 3 Aug 2022 10:33:35 -0500
Subject: [PATCH] Fix height of horizontal link cards

---
 app/soapbox/features/status/components/card.tsx | 10 +++++++++-
 app/styles/components/status.scss               |  5 +----
 2 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx
index f3b18d663..f2e73f117 100644
--- a/app/soapbox/features/status/components/card.tsx
+++ b/app/soapbox/features/status/components/card.tsx
@@ -236,7 +236,15 @@ const Card: React.FC<ICard> = ({
     );
   } else if (card.image) {
     embed = (
-      <div className='status-card__image'>
+      <div className={classnames(
+        'status-card__image',
+        'w-full rounded-l md:w-auto md:h-auto flex-none md:flex-auto',
+        {
+          'h-auto': horizontal,
+          'h-[200px]': !horizontal,
+        },
+      )}
+      >
         {canvas}
         {thumbnail}
       </div>
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index 3b05c9fdd..dfdf9537e 100644
--- a/app/styles/components/status.scss
+++ b/app/styles/components/status.scss
@@ -340,6 +340,7 @@ a.status-card {
   flex: 0 0 40%;
   background: var(--brand-color--med);
   position: relative;
+  overflow: hidden;
 
   & > .svg-icon {
     width: 40px;
@@ -380,10 +381,6 @@ a.status-card {
   @apply flex flex-col md:flex-row;
 }
 
-.status-card--link .status-card__image {
-  @apply w-full rounded-l md:w-auto h-[200px] md:h-auto flex-none md:flex-auto;
-}
-
 .material-status {
   padding-bottom: 10px;