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 &&