diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
index cdfd5e55..604c4910 100644
--- a/src/components/comment-media/comment-media.tsx
+++ b/src/components/comment-media/comment-media.tsx
@@ -109,6 +109,29 @@ const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isF
const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
const linkWithoutThumbnail = url && new URL(url);
+ const fallbackLinkLabel = url ? getHostname(url) || (url.length > 30 ? `${url.slice(0, 30)}...` : url) : '';
+ const noThumbnailLink =
+ !hasThumbnail && linkWithoutThumbnail ? (
+ canEmbed(linkWithoutThumbnail) ? (
+ {
+ if (e.key === 'Enter' || e.key === ' ') {
+ e.preventDefault();
+ setShowThumbnail(false);
+ }
+ }}
+ onClick={() => setShowThumbnail(false)}
+ >
+ {fallbackLinkLabel}
+
+ ) : (
+
+ {fallbackLinkLabel}
+
+ )
+ ) : null;
return deleted || removed ? (
@@ -132,32 +155,12 @@ const Thumbnail = ({ commentMediaInfo, deleted, displayHeight, displayWidth, isF
) : isMobile || isReply ? (
{thumbnailComponent}
- {isMobile &&
- !hasThumbnail &&
- linkWithoutThumbnail &&
- (canEmbed(linkWithoutThumbnail) ? (
- {
- if (e.key === 'Enter' || e.key === ' ') {
- e.preventDefault();
- setShowThumbnail(false);
- }
- }}
- onClick={() => setShowThumbnail(false)}
- >
- {getHostname(url)}
-
- ) : (
-
- {getHostname(url) || (url.length > 30 ? url.slice(0, 30) + '...' : url)}
-
- ))}
+ {noThumbnailLink}
) : (
{thumbnailComponent}
+ {noThumbnailLink}
);
};
diff --git a/src/components/post-desktop/post-desktop.tsx b/src/components/post-desktop/post-desktop.tsx
index 5ddcf24e..8d81ecd6 100644
--- a/src/components/post-desktop/post-desktop.tsx
+++ b/src/components/post-desktop/post-desktop.tsx
@@ -619,7 +619,7 @@ const PostMedia = ({
)}
- {(hasThumbnail || (!hasThumbnail && !showThumbnail) || spoiler) && (
+ {(hasThumbnail || (!hasThumbnail && !showThumbnail) || spoiler || Boolean(commentMediaInfo?.url)) && (