diff --git a/src/components/media.jsx b/src/components/media.jsx index bab23396..d2c6c498 100644 --- a/src/components/media.jsx +++ b/src/components/media.jsx @@ -48,6 +48,8 @@ const AltBadge = (props) => { ); }; +const MEDIA_CAPTION_LIMIT = 140; + function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) { const { blurhash, @@ -371,11 +373,17 @@ function Media({ media, to, showOriginal, autoAnimate, onClick = () => {} }) { {showInlineDesc && (
{ e.preventDefault(); e.stopPropagation(); states.showMediaAlt = description; }} + title={ + description.length > MEDIA_CAPTION_LIMIT ? description : undefined + } > {description}
diff --git a/src/components/status.css b/src/components/status.css index c1a4ee7a..1fc920f6 100644 --- a/src/components/status.css +++ b/src/components/status.css @@ -714,16 +714,19 @@ padding: 0 4px; font-size: 90%; color: var(--text-insignificant-color); - overflow: hidden; - white-space: normal; - display: -webkit-box; - display: box; - -webkit-box-orient: vertical; - box-orient: vertical; - -webkit-line-clamp: 2; - line-clamp: 2; line-height: 1.2; cursor: pointer; + + &.media-caption-long { + overflow: hidden; + white-space: normal; + display: -webkit-box; + display: box; + -webkit-box-orient: vertical; + box-orient: vertical; + -webkit-line-clamp: 3; + line-clamp: 3; + } } }