style(comment media): fix subplebbit avatar size

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%;
 }

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 ? (
+    <span className={styles.subplebbitAvatar}>{thumbnailComponent}</span>
+  ) : isMobile || isReply ? (
     <ThumbnailSmall style={thumbnailDimensions} thumbnailSmallPadding={thumbnailSmallPadding}>
       {thumbnailComponent}
       {isMobile &&