fix(media): clarify failed external image embeds

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

@@ -185,7 +185,7 @@ const renderContent = async (comment: TestComment) => {
   });
 };
 
-const renderContentWithProps = async (props: { comment: TestComment; prependContent?: React.ReactNode }) => {
+const renderContentWithProps = async (props: { appendContent?: React.ReactNode; comment: TestComment; prependContent?: React.ReactNode }) => {
   await act(async () => {
     root.render(createElement(CommentContent, props as any));
   });
@@ -268,6 +268,26 @@ describe('CommentContent', () => {
     expect(blockquote?.querySelectorAll('br')).toHaveLength(1);
   });
 
+  it('renders appended content after markdown with a two-line break separator', async () => {
+    await renderContentWithProps({
+      appendContent: createElement('span', { 'data-testid': 'append' }, 'media failed'),
+      comment: {
+        cid: 'post-1',
+        content: 'body',
+        postCid: 'post-1',
+      },
+    });
+
+    const blockquote = container.querySelector('blockquote');
+    const markdown = container.querySelector('[data-testid="markdown"]');
+    const append = container.querySelector('[data-testid="append"]');
+
+    expect(markdown?.textContent).toBe('body');
+    expect(append?.textContent).toBe('media failed');
+    expect(blockquote?.lastChild).toBe(append);
+    expect(blockquote?.querySelectorAll('br')).toHaveLength(2);
+  });
+
   it('truncates long comments outside the post view and expands them on demand', async () => {
     const longComment = 'x'.repeat(1105);
 

src/components/comment-content/comment-content.tsx

@@ -70,7 +70,7 @@ const getFailedCommentError = (comment: Comment | undefined): unknown => {
   return Array.isArray(comment.errors) ? comment.errors.find(Boolean) : undefined;
 };
 
-const CommentContent = ({ comment: post, prependContent }: { comment: Comment; prependContent?: ReactNode }) => {
+const CommentContent = ({ appendContent, comment: post, prependContent }: { appendContent?: ReactNode; comment: Comment; prependContent?: ReactNode }) => {
   const { t } = useTranslation();
   const params = useParams();
   const location = useLocation();
@@ -306,6 +306,13 @@ const CommentContent = ({ comment: post, prependContent }: { comment: Comment; p
           {loadingString}
         </>
       )}
+      {appendContent && (
+        <>
+          <br />
+          <br />
+          {appendContent}
+        </>
+      )}
     </blockquote>
   );
 };