From cf40f44023c123cd628d2fe952264faf0a91fd5f Mon Sep 17 00:00:00 2001
From: Arya Khochare <91268931+Aryakoste@users.noreply.github.com>
Date: Wed, 8 Apr 2026 00:11:03 +0530
Subject: [PATCH] Markdown message preview fixed (#34942)

* markdown message preview fixed

* message preview overflow fix

* fix show_more test

* restore package-lock.json

* pull package-lock from master

* package-lock line break

* Fix missing newline at end of package-lock.json

* Update test snapshots

---------

Co-authored-by: David Krauser <david@krauser.org>
Co-authored-by: Mattermost Build <build@mattermost.com>
Co-authored-by: David Krauser <david@kruser.org>
---
 .../post_message_preview.test.tsx.snap        | 16 ++++----
 .../post_message_preview.tsx                  |  2 +-
 .../__snapshots__/show_more.test.tsx.snap     | 38 +++++++++++++++++++
 .../post_view/show_more/show_more.test.tsx    | 30 +++++++++++++++
 .../post_view/show_more/show_more.tsx         |  4 +-
 5 files changed, 80 insertions(+), 10 deletions(-)

diff --git a/webapp/channels/src/components/post_view/post_message_preview/__snapshots__/post_message_preview.test.tsx.snap b/webapp/channels/src/components/post_view/post_message_preview/__snapshots__/post_message_preview.test.tsx.snap
index ea1563bbf8c..e176816913b 100644
--- a/webapp/channels/src/components/post_view/post_message_preview/__snapshots__/post_message_preview.test.tsx.snap
+++ b/webapp/channels/src/components/post_view/post_message_preview/__snapshots__/post_message_preview.test.tsx.snap
@@ -64,7 +64,7 @@ exports[`PostMessagePreview direct and group messages should render preview for
             >
               <div
                 class="post-message__text-container"
-                style="max-height: 105px;"
+                style="max-height: 200px;"
               >
                 <div
                   class="post-message__text"
@@ -156,7 +156,7 @@ exports[`PostMessagePreview direct and group messages should render preview for
             >
               <div
                 class="post-message__text-container"
-                style="max-height: 105px;"
+                style="max-height: 200px;"
               >
                 <div
                   class="post-message__text"
@@ -248,7 +248,7 @@ exports[`PostMessagePreview nested previews should render file preview 1`] = `
             >
               <div
                 class="post-message__text-container"
-                style="max-height: 105px;"
+                style="max-height: 200px;"
               >
                 <div
                   class="post-message__text"
@@ -340,7 +340,7 @@ exports[`PostMessagePreview nested previews should render opengraph preview 1`]
             >
               <div
                 class="post-message__text-container"
-                style="max-height: 105px;"
+                style="max-height: 200px;"
               >
                 <div
                   class="post-message__text"
@@ -432,7 +432,7 @@ exports[`PostMessagePreview should not render bot icon 1`] = `
             >
               <div
                 class="post-message__text-container"
-                style="max-height: 105px;"
+                style="max-height: 200px;"
               >
                 <div
                   class="post-message__text"
@@ -524,7 +524,7 @@ exports[`PostMessagePreview should render bot icon 1`] = `
             >
               <div
                 class="post-message__text-container"
-                style="max-height: 105px;"
+                style="max-height: 200px;"
               >
                 <div
                   class="post-message__text"
@@ -616,7 +616,7 @@ exports[`PostMessagePreview should render correctly 1`] = `
             >
               <div
                 class="post-message__text-container"
-                style="max-height: 105px;"
+                style="max-height: 200px;"
               >
                 <div
                   class="post-message__text"
@@ -710,7 +710,7 @@ exports[`PostMessagePreview show render without preview when preview posts becom
             >
               <div
                 class="post-message__text-container"
-                style="max-height: 105px;"
+                style="max-height: 200px;"
               >
                 <div
                   class="post-message__text"
diff --git a/webapp/channels/src/components/post_view/post_message_preview/post_message_preview.tsx b/webapp/channels/src/components/post_view/post_message_preview/post_message_preview.tsx
index d18a2552a61..b44b74e4464 100644
--- a/webapp/channels/src/components/post_view/post_message_preview/post_message_preview.tsx
+++ b/webapp/channels/src/components/post_view/post_message_preview/post_message_preview.tsx
@@ -188,7 +188,7 @@ const PostMessagePreview = (props: Props) => {
                 <PostMessageView
                     post={previewPost}
                     overflowType='ellipsis'
-                    maxHeight={105}
+                    maxHeight={200}
                     userLanguage={locale}
                     isChannelAutotranslated={isChannelAutotranslated}
                 />
diff --git a/webapp/channels/src/components/post_view/show_more/__snapshots__/show_more.test.tsx.snap b/webapp/channels/src/components/post_view/show_more/__snapshots__/show_more.test.tsx.snap
index ad77aa4d8c8..9c2b3bc67d1 100644
--- a/webapp/channels/src/components/post_view/show_more/__snapshots__/show_more.test.tsx.snap
+++ b/webapp/channels/src/components/post_view/show_more/__snapshots__/show_more.test.tsx.snap
@@ -127,6 +127,25 @@ exports[`components/post_view/ShowMore should match snapshot, PostMessageView on
 </div>
 `;
 
+exports[`components/post_view/ShowMore should match snapshot, PostMessageView on collapsed view with ellipsis overflow 1`] = `
+<div>
+  <div
+    class="post-message post-message--collapsed post-message-preview--overflow"
+  >
+    <div
+      class="post-message__text-container"
+      style=""
+    />
+    <button
+      class="post-preview-collapse__show-more-button color--link"
+      id="showMoreButton"
+    >
+      Show more
+    </button>
+  </div>
+</div>
+`;
+
 exports[`components/post_view/ShowMore should match snapshot, PostMessageView on expanded view 1`] = `
 <div>
   <div
@@ -198,3 +217,22 @@ exports[`components/post_view/ShowMore should match snapshot, PostMessageView on
   </div>
 </div>
 `;
+
+exports[`components/post_view/ShowMore should match snapshot, PostMessageView on expanded view with ellipsis overflow 1`] = `
+<div>
+  <div
+    class="post-message post-message--expanded post-message-preview--overflow"
+  >
+    <div
+      class="post-message__text-container"
+      style=""
+    />
+    <button
+      class="post-preview-collapse__show-more-button color--link"
+      id="showMoreButton"
+    >
+      Show less
+    </button>
+  </div>
+</div>
+`;
diff --git a/webapp/channels/src/components/post_view/show_more/show_more.test.tsx b/webapp/channels/src/components/post_view/show_more/show_more.test.tsx
index aaaad38e920..cb3a361b100 100644
--- a/webapp/channels/src/components/post_view/show_more/show_more.test.tsx
+++ b/webapp/channels/src/components/post_view/show_more/show_more.test.tsx
@@ -82,6 +82,36 @@ describe('components/post_view/ShowMore', () => {
         expect(container).toMatchSnapshot();
     });
 
+    test('should match snapshot, PostMessageView on collapsed view with ellipsis overflow', () => {
+        const ref = React.createRef<ShowMore>();
+        const {container} = renderWithContext(
+            <ShowMore
+                {...baseProps}
+                overflowType='ellipsis'
+                ref={ref}
+            />,
+        );
+        act(() => {
+            ref.current?.setState({isOverflow: true, isCollapsed: true});
+        });
+        expect(container).toMatchSnapshot();
+    });
+
+    test('should match snapshot, PostMessageView on expanded view with ellipsis overflow', () => {
+        const ref = React.createRef<ShowMore>();
+        const {container} = renderWithContext(
+            <ShowMore
+                {...baseProps}
+                overflowType='ellipsis'
+                ref={ref}
+            />,
+        );
+        act(() => {
+            ref.current?.setState({isOverflow: true, isCollapsed: false});
+        });
+        expect(container).toMatchSnapshot();
+    });
+
     test('should match snapshot, PostMessageView on expanded view with compactDisplay', () => {
         const ref = React.createRef<ShowMore>();
         const {container} = renderWithContext(
diff --git a/webapp/channels/src/components/post_view/show_more/show_more.tsx b/webapp/channels/src/components/post_view/show_more/show_more.tsx
index bf5c5b067da..df9241dcf33 100644
--- a/webapp/channels/src/components/post_view/show_more/show_more.tsx
+++ b/webapp/channels/src/components/post_view/show_more/show_more.tsx
@@ -114,8 +114,10 @@ export default class ShowMore extends React.PureComponent<Props, State> {
         let className = 'post-message';
         let collapsedMaxHeightStyle: number | undefined;
         if (isCollapsed) {
-            collapsedMaxHeightStyle = this.maxHeight;
             className += ' post-message--collapsed';
+            if (!(overflowType === 'ellipsis' && isOverflow)) {
+                collapsedMaxHeightStyle = this.maxHeight;
+            }
         } else {
             className += ' post-message--expanded';
         }