diff --git a/app/soapbox/features/status/components/card.tsx b/app/soapbox/features/status/components/card.tsx index f2e73f117..0bf71b30a 100644 --- a/app/soapbox/features/status/components/card.tsx +++ b/app/soapbox/features/status/components/card.tsx @@ -4,7 +4,7 @@ import React, { useState, useEffect } from 'react'; import Blurhash from 'soapbox/components/blurhash'; import Icon from 'soapbox/components/icon'; -import { HStack } from 'soapbox/components/ui'; +import { HStack, Stack } from 'soapbox/components/ui'; import { normalizeAttachment } from 'soapbox/normalizers'; import type { Card as CardEntity, Attachment } from 'soapbox/types/entities'; @@ -142,7 +142,6 @@ const Card: React.FC = ({ const title = interactive ? ( e.stopPropagation()} - className='status-card__title' href={card.url} title={trimmedTitle} rel='noopener' @@ -151,15 +150,21 @@ const Card: React.FC = ({ {trimmedTitle} ) : ( - {trimmedTitle} + {trimmedTitle} ); const description = ( -
- {title} -

{trimmedDescription}

- {card.provider_name} -
+ + {trimmedTitle && ( + {title} + )} + {trimmedDescription && ( +

{trimmedDescription}

+ )} + + {card.provider_name} + +
); let embed: React.ReactNode = ''; diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss index dfdf9537e..e4c06eb45 100644 --- a/app/styles/components/status.scss +++ b/app/styles/components/status.scss @@ -308,18 +308,6 @@ a.status-card { } } -.status-card__title { - @apply block font-medium mb-2 text-gray-800 dark:text-gray-200 no-underline; -} - -.status-card__content { - @apply flex-1 overflow-hidden p-4; -} - -.status-card__description { - @apply text-gray-500 dark:text-gray-400; -} - .status-card__host { display: flex; margin-top: 10px;