diff --git a/src/components/comment-media/comment-media.module.css b/src/components/comment-media/comment-media.module.css index d9298d7f..bc16045b 100644 --- a/src/components/comment-media/comment-media.module.css +++ b/src/components/comment-media/comment-media.module.css @@ -5,9 +5,17 @@ max-width: 250px; max-height: 250px; margin: 3px 20px 5px 0; - display: flex; + display: inline-flex; justify-content: center; align-items: center; + overflow: hidden; +} + +.subplebbitAvatar { + max-width: 250px; + max-height: 250px; + margin: 3px 20px 5px 0; + display: inline-block; } .thumbnailSmall { @@ -17,9 +25,10 @@ max-width: 125px; max-height: 125px; margin: 3px 10px 5px 5px; - display: flex; + display: inline-flex; justify-content: center; align-items: center; + overflow: hidden; } .thumbnailSmall span, .thumbnailSmall a { @@ -43,7 +52,6 @@ } .content img, .content video, .content iframe, .content audio { - box-sizing: border-box; max-width: 100%; max-height: 100%; } diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx index 55ec8e76..b147b1df 100644 --- a/src/components/comment-media/comment-media.tsx +++ b/src/components/comment-media/comment-media.tsx @@ -57,11 +57,6 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid displayHeight = '100%'; } - if (isOutOfFeed) { - displayWidth = 'unset'; - displayHeight = 'unset'; - } - let thumbnailComponent: React.ReactNode = null; const iframeThumbnail = patternThumbnailUrl || thumbnail; const gifFrameUrl = useFetchGifFirstFrame(type === 'gif' ? url : undefined); @@ -86,7 +81,9 @@ const Thumbnail = ({ commentMediaInfo, isOutOfFeed, isReply, linkHeight, linkWid const linkWithoutThumbnail = url && new URL(url); - return isMobile || isReply ? ( + return isOutOfFeed ? ( + {thumbnailComponent} + ) : isMobile || isReply ? ( {thumbnailComponent} {isMobile &&