fix(feed): measure expanded reply media height

src/components/comment-media/__tests__/comment-media.test.tsx

@@ -128,6 +128,29 @@ describe('CommentMedia', () => {
     expect(container.textContent).toContain('640x480');
   });
 
+  it('marks expanded reply images so virtualized feed rows use live height', async () => {
+    await renderMedia({
+      commentMediaInfo: {
+        linkHeight: 300,
+        linkWidth: 600,
+        type: 'image',
+        url: 'https://cdn.example.com/reply-image.jpg',
+      },
+      parentCid: 'parent-cid',
+      setShowThumbnail: setShowThumbnailMock,
+      showThumbnail: true,
+    });
+
+    expect(container.querySelector('[data-expanded-media="true"]')).toBeNull();
+
+    const image = container.querySelector('img[src="https://cdn.example.com/reply-image.jpg"]');
+    await act(async () => {
+      image?.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+    });
+
+    expect(container.querySelector('[data-expanded-media="true"]')).toBeTruthy();
+  });
+
   it('falls back to the deleted-file placeholder when an image fails to load', async () => {
     await renderMedia({
       commentMediaInfo: {

src/components/comment-media/comment-media.tsx

@@ -210,7 +210,7 @@ const Media = ({ commentMediaInfo, disableToggle, isReply, setShowThumbnail }: M
   const mediaDimensions = getMediaDimensions(commentMediaInfo);
 
   return (
-    <span className={mediaClass}>
+    <span className={mediaClass} data-expanded-media='true'>
       {type === 'iframe' && url ? (
         <Embed url={url} />
       ) : type === 'gif' ? (
@@ -307,6 +307,8 @@ const Image = ({ commentMediaInfo, disableToggle = false, displayHeight, display
   }`;
   const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
   const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
+  const expandedMediaAttribute = isImageExpanded ? 'true' : undefined;
+  const imageMediaStyle = isImageExpanded ? undefined : thumbnailDimensions;
 
   const [hasError, setHasError] = useState(false);
   const handleError = () => setHasError(true);
@@ -340,7 +342,8 @@ const Image = ({ commentMediaInfo, disableToggle = false, displayHeight, display
     <span className={`${styles.thumbnail} ${isImageExpanded && isMobile ? styles.removeFloat : ''}`}>
       <span
         className={isImageExpanded ? mediaClass : `${isOutOfFeed ? styles.communityAvatar : styles.thumbnailSmall} ${thumbnailSmallPadding}`}
-        style={isImageExpanded ? {} : thumbnailDimensions}
+        data-expanded-media={expandedMediaAttribute}
+        style={imageMediaStyle}
       >
         {hasError ? (
           <img src='assets/filedeleted-res.gif' alt='File deleted' />
@@ -379,7 +382,8 @@ const Image = ({ commentMediaInfo, disableToggle = false, displayHeight, display
   ) : (
     <span
       className={isImageExpanded ? mediaClass : `${isOutOfFeed ? styles.communityAvatar : styles.thumbnailBig} ${styles.thumbnail}`}
-      style={isImageExpanded ? {} : thumbnailDimensions}
+      data-expanded-media={expandedMediaAttribute}
+      style={imageMediaStyle}
     >
       {hasError ? (
         <img src='assets/filedeleted-res.gif' alt='File deleted' />