From f1bf24c10ff85c65e29945e016a03ffb684e3575 Mon Sep 17 00:00:00 2001
From: Jannis Mattheis <contact@jmattheis.de>
Date: Sat, 20 Sep 2025 13:18:59 +0200
Subject: [PATCH] fix: recalculate message overflow when image loads

The detection if the read-more button is necessary happened once at
render and wasn't recalculated after images loaded. This caused hidden
message overflow without a read more button.
---
 ui/src/common/Markdown.tsx | 14 ++++++++++++--
 ui/src/message/Message.tsx | 24 ++++++++++++++++++------
 2 files changed, 30 insertions(+), 8 deletions(-)

diff --git a/ui/src/common/Markdown.tsx b/ui/src/common/Markdown.tsx
index e01a9c8..33ac661 100644
--- a/ui/src/common/Markdown.tsx
+++ b/ui/src/common/Markdown.tsx
@@ -2,6 +2,16 @@ import React from 'react';
 import ReactMarkdown from 'react-markdown';
 import gfm from 'remark-gfm';
 
-export const Markdown = ({children}: {children: string}) => (
-    <ReactMarkdown remarkPlugins={[gfm]}>{children}</ReactMarkdown>
+export const Markdown = ({
+    children,
+    onImageLoaded = () => {},
+}: {
+    children: string;
+    onImageLoaded?: () => void;
+}) => (
+    <ReactMarkdown
+        components={{img: ({...props}) => <img onLoad={onImageLoaded} {...props} />}}
+        remarkPlugins={[gfm]}>
+        {children}
+    </ReactMarkdown>
 );
diff --git a/ui/src/message/Message.tsx b/ui/src/message/Message.tsx
index 02a55fc..e6e6af3 100644
--- a/ui/src/message/Message.tsx
+++ b/ui/src/message/Message.tsx
@@ -127,15 +127,27 @@ const Message = ({
     expanded: initialExpanded,
 }: IProps) => {
     const theme = useTheme();
-    const [previewRef, setPreviewRef] = React.useState<HTMLDivElement | null>(null);
+    const contentRef = React.useRef<HTMLDivElement | null>(null);
     const {classes} = useStyles();
     const [expanded, setExpanded] = React.useState(initialExpanded);
     const [isOverflowing, setOverflowing] = React.useState(false);
     const smallHeader = useMediaQuery(theme.breakpoints.down('md'));
 
-    React.useEffect(() => {
-        setOverflowing(!!previewRef && previewRef.scrollHeight > previewRef.clientHeight);
-    }, [previewRef]);
+    const refreshOverflowing = React.useCallback(() => {
+        const ref = contentRef.current;
+        if (!ref) {
+            return;
+        }
+        setOverflowing((overflowing) => overflowing || ref.scrollHeight > ref.clientHeight);
+    }, [contentRef, setOverflowing]);
+
+    const onContentRef = React.useCallback(
+        (ref: HTMLDivElement | null) => {
+            contentRef.current = ref;
+            refreshOverflowing();
+        },
+        [contentRef, refreshOverflowing]
+    );
 
     React.useEffect(() => void onExpand(expanded), [expanded]);
 
@@ -144,7 +156,7 @@ const Message = ({
     const renderContent = () => {
         switch (contentType(extras)) {
             case RenderMode.Markdown:
-                return <Markdown>{content}</Markdown>;
+                return <Markdown onImageLoaded={refreshOverflowing}>{content}</Markdown>;
             case RenderMode.Plain:
             default:
                 return <span className={classes.plainContent}>{content}</span>;
@@ -181,7 +193,7 @@ const Message = ({
                 <div className={classes.messageContentWrapper}>
                     <Typography
                         component="div"
-                        ref={setPreviewRef}
+                        ref={onContentRef}
                         className={`${classes.content} content ${
                             isOverflowing && expanded ? 'expanded' : ''
                         }`}>