diff --git a/app/soapbox/features/status/components/card.js b/app/soapbox/features/status/components/card.js
index db291f612..f49df788e 100644
--- a/app/soapbox/features/status/components/card.js
+++ b/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 = (
{title}
- {!(horizontal || compact) &&
{trim(card.get('description') || '', maxDescription)}
}
-
{provider}
+
{trim(card.get('description') || '', maxDescription)}
+
{provider}
);
@@ -221,7 +221,7 @@ export default class Card extends React.PureComponent {
);
} else {
embed = (
-
+
);
diff --git a/app/styles/components/status.scss b/app/styles/components/status.scss
index bf9abcb65..3378e42cc 100644
--- a/app/styles/components/status.scss
+++ b/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;
- color: var(--primary-text-color--faint);
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ margin-bottom: 10px;
+ color: var(--primary-text-color);
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 {