From da937b0598ce3f4b4eead05c62f1f688de463c2d Mon Sep 17 00:00:00 2001
From: Harshil Sharma <18575143+harshilsharma63@users.noreply.github.com>
Date: Wed, 13 Nov 2024 14:44:11 +0530
Subject: [PATCH] Scheudled post show more (#29226)

* Added show more to long draft adn scheduled post

* Added show more to long draft adn scheduled post

* Fixed layout

* Updated snapshots
---
 .../__snapshots__/panel_body.test.tsx.snap    | 998 ++++++++++--------
 .../drafts/panel/panel_body.test.tsx          |   6 +
 .../components/drafts/panel/panel_body.tsx    |  67 +-
 3 files changed, 600 insertions(+), 471 deletions(-)

diff --git a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
index 4158c8a1ee..026c6d632e 100644
--- a/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
+++ b/webapp/channels/src/components/drafts/panel/__snapshots__/panel_body.test.tsx.snap
@@ -117,80 +117,109 @@ exports[`components/drafts/panel/panel_body should have called handleFormattedTe
         </ProfilePicture>
       </div>
       <div
-        className="post__content"
-        onClick={[Function]}
+        className="DraftPanelBody__post_body"
       >
-        <div
-          className="DraftPanelBody__right"
+        <Connect(ShowMore)
+          text="message"
         >
-          <div
-            className="post__header"
+          <ShowMore
+            compactDisplay={false}
+            dispatch={[Function]}
+            isRHSExpanded={false}
+            isRHSOpen={false}
+            text="message"
           >
-            <strong>
-              display_name
-            </strong>
-          </div>
-          <div
-            className="post__body"
-          >
-            <Connect(Markdown)
-              message="message"
-              options={
-                Object {
-                  "disableGroupHighlight": true,
-                  "mentionHighlight": false,
-                }
-              }
+            <div
+              className="post-message post-message--collapsed"
             >
-              <Markdown
-                autolinkedUrlSchemes={
-                  Array [
-                    "http",
-                    "https",
-                    "ftp",
-                    "mailto",
-                    "tel",
-                    "mattermost",
-                  ]
-                }
-                channelNamesMap={Object {}}
-                dispatch={[Function]}
-                emojiMap={
-                  EmojiMap {
-                    "customEmojis": Map {},
-                    "customEmojisArray": Array [],
-                  }
-                }
-                enableFormatting={true}
-                hasImageProxy={false}
-                managedResourcePaths={Array []}
-                mentionKeys={Array []}
-                message="message"
-                minimumHashtagLength={NaN}
-                options={
+              <div
+                className="post-message__text-container"
+                style={
                   Object {
-                    "disableGroupHighlight": true,
-                    "mentionHighlight": false,
-                  }
-                }
-                siteURL="http://localhost:8065"
-                team={
-                  Object {
-                    "display_name": "Team ID",
-                    "id": "team_id",
-                    "name": "team-id",
+                    "maxHeight": 600,
                   }
                 }
               >
-                <p
-                  key="0"
+                <div
+                  className="post__content"
+                  onClick={[Function]}
                 >
-                  message
-                </p>
-              </Markdown>
-            </Connect(Markdown)>
-          </div>
-        </div>
+                  <div
+                    className="DraftPanelBody__right"
+                  >
+                    <div
+                      className="post__header"
+                    >
+                      <strong>
+                        display_name
+                      </strong>
+                    </div>
+                    <div
+                      className="post__body"
+                    >
+                      <Connect(Markdown)
+                        message="message"
+                        options={
+                          Object {
+                            "disableGroupHighlight": true,
+                            "mentionHighlight": false,
+                          }
+                        }
+                      >
+                        <Markdown
+                          autolinkedUrlSchemes={
+                            Array [
+                              "http",
+                              "https",
+                              "ftp",
+                              "mailto",
+                              "tel",
+                              "mattermost",
+                            ]
+                          }
+                          channelNamesMap={Object {}}
+                          dispatch={[Function]}
+                          emojiMap={
+                            EmojiMap {
+                              "customEmojis": Map {},
+                              "customEmojisArray": Array [],
+                            }
+                          }
+                          enableFormatting={true}
+                          hasImageProxy={false}
+                          managedResourcePaths={Array []}
+                          mentionKeys={Array []}
+                          message="message"
+                          minimumHashtagLength={NaN}
+                          options={
+                            Object {
+                              "disableGroupHighlight": true,
+                              "mentionHighlight": false,
+                            }
+                          }
+                          siteURL="http://localhost:8065"
+                          team={
+                            Object {
+                              "display_name": "Team ID",
+                              "id": "team_id",
+                              "name": "team-id",
+                            }
+                          }
+                        >
+                          <p
+                            key="0"
+                          >
+                            message
+                          </p>
+                        </Markdown>
+                      </Connect(Markdown)>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </ShowMore>
+        </Connect(ShowMore)>
       </div>
     </div>
   </PanelBody>
@@ -314,80 +343,109 @@ exports[`components/drafts/panel/panel_body should match snapshot 1`] = `
         </ProfilePicture>
       </div>
       <div
-        className="post__content"
-        onClick={[Function]}
+        className="DraftPanelBody__post_body"
       >
-        <div
-          className="DraftPanelBody__right"
+        <Connect(ShowMore)
+          text="message"
         >
-          <div
-            className="post__header"
+          <ShowMore
+            compactDisplay={false}
+            dispatch={[Function]}
+            isRHSExpanded={false}
+            isRHSOpen={false}
+            text="message"
           >
-            <strong>
-              display_name
-            </strong>
-          </div>
-          <div
-            className="post__body"
-          >
-            <Connect(Markdown)
-              message="message"
-              options={
-                Object {
-                  "disableGroupHighlight": true,
-                  "mentionHighlight": false,
-                }
-              }
+            <div
+              className="post-message post-message--collapsed"
             >
-              <Markdown
-                autolinkedUrlSchemes={
-                  Array [
-                    "http",
-                    "https",
-                    "ftp",
-                    "mailto",
-                    "tel",
-                    "mattermost",
-                  ]
-                }
-                channelNamesMap={Object {}}
-                dispatch={[Function]}
-                emojiMap={
-                  EmojiMap {
-                    "customEmojis": Map {},
-                    "customEmojisArray": Array [],
-                  }
-                }
-                enableFormatting={true}
-                hasImageProxy={false}
-                managedResourcePaths={Array []}
-                mentionKeys={Array []}
-                message="message"
-                minimumHashtagLength={NaN}
-                options={
+              <div
+                className="post-message__text-container"
+                style={
                   Object {
-                    "disableGroupHighlight": true,
-                    "mentionHighlight": false,
-                  }
-                }
-                siteURL="http://localhost:8065"
-                team={
-                  Object {
-                    "display_name": "Team ID",
-                    "id": "team_id",
-                    "name": "team-id",
+                    "maxHeight": 600,
                   }
                 }
               >
-                <p
-                  key="0"
+                <div
+                  className="post__content"
+                  onClick={[Function]}
                 >
-                  message
-                </p>
-              </Markdown>
-            </Connect(Markdown)>
-          </div>
-        </div>
+                  <div
+                    className="DraftPanelBody__right"
+                  >
+                    <div
+                      className="post__header"
+                    >
+                      <strong>
+                        display_name
+                      </strong>
+                    </div>
+                    <div
+                      className="post__body"
+                    >
+                      <Connect(Markdown)
+                        message="message"
+                        options={
+                          Object {
+                            "disableGroupHighlight": true,
+                            "mentionHighlight": false,
+                          }
+                        }
+                      >
+                        <Markdown
+                          autolinkedUrlSchemes={
+                            Array [
+                              "http",
+                              "https",
+                              "ftp",
+                              "mailto",
+                              "tel",
+                              "mattermost",
+                            ]
+                          }
+                          channelNamesMap={Object {}}
+                          dispatch={[Function]}
+                          emojiMap={
+                            EmojiMap {
+                              "customEmojis": Map {},
+                              "customEmojisArray": Array [],
+                            }
+                          }
+                          enableFormatting={true}
+                          hasImageProxy={false}
+                          managedResourcePaths={Array []}
+                          mentionKeys={Array []}
+                          message="message"
+                          minimumHashtagLength={NaN}
+                          options={
+                            Object {
+                              "disableGroupHighlight": true,
+                              "mentionHighlight": false,
+                            }
+                          }
+                          siteURL="http://localhost:8065"
+                          team={
+                            Object {
+                              "display_name": "Team ID",
+                              "id": "team_id",
+                              "name": "team-id",
+                            }
+                          }
+                        >
+                          <p
+                            key="0"
+                          >
+                            message
+                          </p>
+                        </Markdown>
+                      </Connect(Markdown)>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </ShowMore>
+        </Connect(ShowMore)>
       </div>
     </div>
   </PanelBody>
@@ -517,142 +575,171 @@ exports[`components/drafts/panel/panel_body should match snapshot for priority 1
         </ProfilePicture>
       </div>
       <div
-        className="post__content"
-        onClick={[Function]}
+        className="DraftPanelBody__post_body"
       >
-        <div
-          className="DraftPanelBody__right"
+        <Connect(ShowMore)
+          text="message"
         >
-          <div
-            className="post__header"
+          <ShowMore
+            compactDisplay={false}
+            dispatch={[Function]}
+            isRHSExpanded={false}
+            isRHSOpen={false}
+            text="message"
           >
-            <strong>
-              display_name
-            </strong>
-            <Memo(PriorityLabels)
-              canRemove={false}
-              hasError={false}
-              padding="0 0 0 8px"
-              priority="important"
-              requestedAck={false}
+            <div
+              className="post-message post-message--collapsed"
             >
-              <Priority
-                padding="0 0 0 8px"
+              <div
+                className="post-message__text-container"
+                style={
+                  Object {
+                    "maxHeight": 600,
+                  }
+                }
               >
                 <div
-                  className="Priority-unHRQ dkJcdD"
+                  className="post__content"
+                  onClick={[Function]}
                 >
-                  <PriorityLabel
-                    priority="important"
-                    size="xs"
+                  <div
+                    className="DraftPanelBody__right"
                   >
-                    <Memo(Tag)
-                      icon="alert-circle-outline"
-                      size="xs"
-                      text="Important"
-                      uppercase={true}
-                      variant="info"
+                    <div
+                      className="post__header"
                     >
-                      <TagWrapper
-                        as="div"
-                        className="Tag Tag--info Tag--xs"
-                        uppercase={true}
+                      <strong>
+                        display_name
+                      </strong>
+                      <Memo(PriorityLabels)
+                        canRemove={false}
+                        hasError={false}
+                        padding="0 0 0 8px"
+                        priority="important"
+                        requestedAck={false}
                       >
-                        <div
-                          className="TagWrapper-keYggn gnIgwl Tag Tag--info Tag--xs"
+                        <Priority
+                          padding="0 0 0 8px"
                         >
-                          <AlertCircleOutlineIcon
-                            size={10}
+                          <div
+                            className="Priority-unHRQ dkJcdD"
                           >
-                            <svg
-                              fill="currentColor"
-                              height={10}
-                              version="1.1"
-                              viewBox="0 0 24 24"
-                              width={10}
-                              xmlns="http://www.w3.org/2000/svg"
+                            <PriorityLabel
+                              priority="important"
+                              size="xs"
                             >
-                              <path
-                                d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2 M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S16.4,20,12,20z M12.501,13h-1l-0.5-6h2L12.501,13z M13,16c0,0.552-0.448,1-1,1s-1-0.448-1-1s0.448-1,1-1S13,15.448,13,16z"
-                              />
-                            </svg>
-                          </AlertCircleOutlineIcon>
-                          <TagText>
-                            <span
-                              className="TagText-bWgUzx kzWPbz"
-                            >
-                              Important
-                            </span>
-                          </TagText>
-                        </div>
-                      </TagWrapper>
-                    </Memo(Tag)>
-                  </PriorityLabel>
+                              <Memo(Tag)
+                                icon="alert-circle-outline"
+                                size="xs"
+                                text="Important"
+                                uppercase={true}
+                                variant="info"
+                              >
+                                <TagWrapper
+                                  as="div"
+                                  className="Tag Tag--info Tag--xs"
+                                  uppercase={true}
+                                >
+                                  <div
+                                    className="TagWrapper-keYggn gnIgwl Tag Tag--info Tag--xs"
+                                  >
+                                    <AlertCircleOutlineIcon
+                                      size={10}
+                                    >
+                                      <svg
+                                        fill="currentColor"
+                                        height={10}
+                                        version="1.1"
+                                        viewBox="0 0 24 24"
+                                        width={10}
+                                        xmlns="http://www.w3.org/2000/svg"
+                                      >
+                                        <path
+                                          d="M12,2C6.5,2,2,6.5,2,12s4.5,10,10,10s10-4.5,10-10S17.5,2,12,2 M12,20c-4.4,0-8-3.6-8-8s3.6-8,8-8s8,3.6,8,8S16.4,20,12,20z M12.501,13h-1l-0.5-6h2L12.501,13z M13,16c0,0.552-0.448,1-1,1s-1-0.448-1-1s0.448-1,1-1S13,15.448,13,16z"
+                                        />
+                                      </svg>
+                                    </AlertCircleOutlineIcon>
+                                    <TagText>
+                                      <span
+                                        className="TagText-bWgUzx kzWPbz"
+                                      >
+                                        Important
+                                      </span>
+                                    </TagText>
+                                  </div>
+                                </TagWrapper>
+                              </Memo(Tag)>
+                            </PriorityLabel>
+                          </div>
+                        </Priority>
+                      </Memo(PriorityLabels)>
+                    </div>
+                    <div
+                      className="post__body"
+                    >
+                      <Connect(Markdown)
+                        message="message"
+                        options={
+                          Object {
+                            "disableGroupHighlight": true,
+                            "mentionHighlight": false,
+                          }
+                        }
+                      >
+                        <Markdown
+                          autolinkedUrlSchemes={
+                            Array [
+                              "http",
+                              "https",
+                              "ftp",
+                              "mailto",
+                              "tel",
+                              "mattermost",
+                            ]
+                          }
+                          channelNamesMap={Object {}}
+                          dispatch={[Function]}
+                          emojiMap={
+                            EmojiMap {
+                              "customEmojis": Map {},
+                              "customEmojisArray": Array [],
+                            }
+                          }
+                          enableFormatting={true}
+                          hasImageProxy={false}
+                          managedResourcePaths={Array []}
+                          mentionKeys={Array []}
+                          message="message"
+                          minimumHashtagLength={NaN}
+                          options={
+                            Object {
+                              "disableGroupHighlight": true,
+                              "mentionHighlight": false,
+                            }
+                          }
+                          siteURL="http://localhost:8065"
+                          team={
+                            Object {
+                              "display_name": "Team ID",
+                              "id": "team_id",
+                              "name": "team-id",
+                            }
+                          }
+                        >
+                          <p
+                            key="0"
+                          >
+                            message
+                          </p>
+                        </Markdown>
+                      </Connect(Markdown)>
+                    </div>
+                  </div>
                 </div>
-              </Priority>
-            </Memo(PriorityLabels)>
-          </div>
-          <div
-            className="post__body"
-          >
-            <Connect(Markdown)
-              message="message"
-              options={
-                Object {
-                  "disableGroupHighlight": true,
-                  "mentionHighlight": false,
-                }
-              }
-            >
-              <Markdown
-                autolinkedUrlSchemes={
-                  Array [
-                    "http",
-                    "https",
-                    "ftp",
-                    "mailto",
-                    "tel",
-                    "mattermost",
-                  ]
-                }
-                channelNamesMap={Object {}}
-                dispatch={[Function]}
-                emojiMap={
-                  EmojiMap {
-                    "customEmojis": Map {},
-                    "customEmojisArray": Array [],
-                  }
-                }
-                enableFormatting={true}
-                hasImageProxy={false}
-                managedResourcePaths={Array []}
-                mentionKeys={Array []}
-                message="message"
-                minimumHashtagLength={NaN}
-                options={
-                  Object {
-                    "disableGroupHighlight": true,
-                    "mentionHighlight": false,
-                  }
-                }
-                siteURL="http://localhost:8065"
-                team={
-                  Object {
-                    "display_name": "Team ID",
-                    "id": "team_id",
-                    "name": "team-id",
-                  }
-                }
-              >
-                <p
-                  key="0"
-                >
-                  message
-                </p>
-              </Markdown>
-            </Connect(Markdown)>
-          </div>
-        </div>
+              </div>
+            </div>
+          </ShowMore>
+        </Connect(ShowMore)>
       </div>
     </div>
   </PanelBody>
@@ -782,213 +869,242 @@ exports[`components/drafts/panel/panel_body should match snapshot for requested_
         </ProfilePicture>
       </div>
       <div
-        className="post__content"
-        onClick={[Function]}
+        className="DraftPanelBody__post_body"
       >
-        <div
-          className="DraftPanelBody__right"
+        <Connect(ShowMore)
+          text="message"
         >
-          <div
-            className="post__header"
+          <ShowMore
+            compactDisplay={false}
+            dispatch={[Function]}
+            isRHSExpanded={false}
+            isRHSOpen={false}
+            text="message"
           >
-            <strong>
-              display_name
-            </strong>
-            <Memo(PriorityLabels)
-              canRemove={false}
-              hasError={false}
-              padding="0 0 0 8px"
-              priority=""
-              requestedAck={true}
+            <div
+              className="post-message post-message--collapsed"
             >
-              <Priority
-                padding="0 0 0 8px"
+              <div
+                className="post-message__text-container"
+                style={
+                  Object {
+                    "maxHeight": 600,
+                  }
+                }
               >
                 <div
-                  className="Priority-unHRQ dkJcdD"
+                  className="post__content"
+                  onClick={[Function]}
                 >
-                  <Acknowledgements
-                    hasError={false}
+                  <div
+                    className="DraftPanelBody__right"
                   >
                     <div
-                      className="Acknowledgements-kPkVCv dNydui"
+                      className="post__header"
                     >
-                      <WithTooltip
-                        id="post-priority-picker-ack-tooltip"
-                        placement="top"
-                        title="Acknowledgement will be requested"
+                      <strong>
+                        display_name
+                      </strong>
+                      <Memo(PriorityLabels)
+                        canRemove={false}
+                        hasError={false}
+                        padding="0 0 0 8px"
+                        priority=""
+                        requestedAck={true}
                       >
-                        <OverlayTrigger
-                          defaultOverlayShown={false}
-                          delay={400}
-                          disabled={false}
-                          overlay={<Unknown />}
-                          placement="top"
-                          trigger={
+                        <Priority
+                          padding="0 0 0 8px"
+                        >
+                          <div
+                            className="Priority-unHRQ dkJcdD"
+                          >
+                            <Acknowledgements
+                              hasError={false}
+                            >
+                              <div
+                                className="Acknowledgements-kPkVCv dNydui"
+                              >
+                                <WithTooltip
+                                  id="post-priority-picker-ack-tooltip"
+                                  placement="top"
+                                  title="Acknowledgement will be requested"
+                                >
+                                  <OverlayTrigger
+                                    defaultOverlayShown={false}
+                                    delay={400}
+                                    disabled={false}
+                                    overlay={<Unknown />}
+                                    placement="top"
+                                    trigger={
+                                      Array [
+                                        "hover",
+                                        "focus",
+                                      ]
+                                    }
+                                  >
+                                    <OverlayTrigger
+                                      defaultOverlayShown={false}
+                                      delay={400}
+                                      overlay={
+                                        <OverlayWrapper
+                                          intl={
+                                            Object {
+                                              "$t": [Function],
+                                              "defaultFormats": Object {},
+                                              "defaultLocale": "en",
+                                              "defaultRichTextElements": undefined,
+                                              "fallbackOnEmptyString": true,
+                                              "formatDate": [Function],
+                                              "formatDateTimeRange": [Function],
+                                              "formatDateToParts": [Function],
+                                              "formatDisplayName": [Function],
+                                              "formatList": [Function],
+                                              "formatListToParts": [Function],
+                                              "formatMessage": [Function],
+                                              "formatNumber": [Function],
+                                              "formatNumberToParts": [Function],
+                                              "formatPlural": [Function],
+                                              "formatRelativeTime": [Function],
+                                              "formatTime": [Function],
+                                              "formatTimeToParts": [Function],
+                                              "formats": Object {},
+                                              "formatters": Object {
+                                                "getDateTimeFormat": [Function],
+                                                "getDisplayNames": [Function],
+                                                "getListFormat": [Function],
+                                                "getMessageFormat": [Function],
+                                                "getNumberFormat": [Function],
+                                                "getPluralRules": [Function],
+                                                "getRelativeTimeFormat": [Function],
+                                              },
+                                              "locale": "en",
+                                              "messages": Object {},
+                                              "onError": [Function],
+                                              "onWarn": [Function],
+                                              "textComponent": "span",
+                                              "timeZone": "Etc/UTC",
+                                              "wrapRichTextChunksInFragment": undefined,
+                                            }
+                                          }
+                                        />
+                                      }
+                                      placement="top"
+                                      trigger={
+                                        Array [
+                                          "hover",
+                                          "focus",
+                                        ]
+                                      }
+                                    >
+                                      <CheckCircleOutlineIcon
+                                        onBlur={[Function]}
+                                        onClick={null}
+                                        onFocus={[Function]}
+                                        onMouseOut={[Function]}
+                                        onMouseOver={[Function]}
+                                        size={14}
+                                      >
+                                        <svg
+                                          fill="currentColor"
+                                          height={14}
+                                          onBlur={[Function]}
+                                          onClick={null}
+                                          onFocus={[Function]}
+                                          onMouseOut={[Function]}
+                                          onMouseOver={[Function]}
+                                          version="1.1"
+                                          viewBox="0 0 24 24"
+                                          width={14}
+                                          xmlns="http://www.w3.org/2000/svg"
+                                        >
+                                          <path
+                                            d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
+                                          />
+                                        </svg>
+                                      </CheckCircleOutlineIcon>
+                                    </OverlayTrigger>
+                                  </OverlayTrigger>
+                                </WithTooltip>
+                                <FormattedMessage
+                                  defaultMessage="Request acknowledgement"
+                                  id="post_priority.request_acknowledgement"
+                                >
+                                  <span>
+                                    Request acknowledgement
+                                  </span>
+                                </FormattedMessage>
+                              </div>
+                            </Acknowledgements>
+                          </div>
+                        </Priority>
+                      </Memo(PriorityLabels)>
+                    </div>
+                    <div
+                      className="post__body"
+                    >
+                      <Connect(Markdown)
+                        message="message"
+                        options={
+                          Object {
+                            "disableGroupHighlight": true,
+                            "mentionHighlight": false,
+                          }
+                        }
+                      >
+                        <Markdown
+                          autolinkedUrlSchemes={
                             Array [
-                              "hover",
-                              "focus",
+                              "http",
+                              "https",
+                              "ftp",
+                              "mailto",
+                              "tel",
+                              "mattermost",
                             ]
                           }
+                          channelNamesMap={Object {}}
+                          dispatch={[Function]}
+                          emojiMap={
+                            EmojiMap {
+                              "customEmojis": Map {},
+                              "customEmojisArray": Array [],
+                            }
+                          }
+                          enableFormatting={true}
+                          hasImageProxy={false}
+                          managedResourcePaths={Array []}
+                          mentionKeys={Array []}
+                          message="message"
+                          minimumHashtagLength={NaN}
+                          options={
+                            Object {
+                              "disableGroupHighlight": true,
+                              "mentionHighlight": false,
+                            }
+                          }
+                          siteURL="http://localhost:8065"
+                          team={
+                            Object {
+                              "display_name": "Team ID",
+                              "id": "team_id",
+                              "name": "team-id",
+                            }
+                          }
                         >
-                          <OverlayTrigger
-                            defaultOverlayShown={false}
-                            delay={400}
-                            overlay={
-                              <OverlayWrapper
-                                intl={
-                                  Object {
-                                    "$t": [Function],
-                                    "defaultFormats": Object {},
-                                    "defaultLocale": "en",
-                                    "defaultRichTextElements": undefined,
-                                    "fallbackOnEmptyString": true,
-                                    "formatDate": [Function],
-                                    "formatDateTimeRange": [Function],
-                                    "formatDateToParts": [Function],
-                                    "formatDisplayName": [Function],
-                                    "formatList": [Function],
-                                    "formatListToParts": [Function],
-                                    "formatMessage": [Function],
-                                    "formatNumber": [Function],
-                                    "formatNumberToParts": [Function],
-                                    "formatPlural": [Function],
-                                    "formatRelativeTime": [Function],
-                                    "formatTime": [Function],
-                                    "formatTimeToParts": [Function],
-                                    "formats": Object {},
-                                    "formatters": Object {
-                                      "getDateTimeFormat": [Function],
-                                      "getDisplayNames": [Function],
-                                      "getListFormat": [Function],
-                                      "getMessageFormat": [Function],
-                                      "getNumberFormat": [Function],
-                                      "getPluralRules": [Function],
-                                      "getRelativeTimeFormat": [Function],
-                                    },
-                                    "locale": "en",
-                                    "messages": Object {},
-                                    "onError": [Function],
-                                    "onWarn": [Function],
-                                    "textComponent": "span",
-                                    "timeZone": "Etc/UTC",
-                                    "wrapRichTextChunksInFragment": undefined,
-                                  }
-                                }
-                              />
-                            }
-                            placement="top"
-                            trigger={
-                              Array [
-                                "hover",
-                                "focus",
-                              ]
-                            }
+                          <p
+                            key="0"
                           >
-                            <CheckCircleOutlineIcon
-                              onBlur={[Function]}
-                              onClick={null}
-                              onFocus={[Function]}
-                              onMouseOut={[Function]}
-                              onMouseOver={[Function]}
-                              size={14}
-                            >
-                              <svg
-                                fill="currentColor"
-                                height={14}
-                                onBlur={[Function]}
-                                onClick={null}
-                                onFocus={[Function]}
-                                onMouseOut={[Function]}
-                                onMouseOver={[Function]}
-                                version="1.1"
-                                viewBox="0 0 24 24"
-                                width={14}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M12 20C7.59 20 4 16.41 4 12S7.59 4 12 4 20 7.59 20 12 16.41 20 12 20M16.59 7.58L10 14.17L7.41 11.59L6 13L10 17L18 9L16.59 7.58Z"
-                                />
-                              </svg>
-                            </CheckCircleOutlineIcon>
-                          </OverlayTrigger>
-                        </OverlayTrigger>
-                      </WithTooltip>
-                      <FormattedMessage
-                        defaultMessage="Request acknowledgement"
-                        id="post_priority.request_acknowledgement"
-                      >
-                        <span>
-                          Request acknowledgement
-                        </span>
-                      </FormattedMessage>
+                            message
+                          </p>
+                        </Markdown>
+                      </Connect(Markdown)>
                     </div>
-                  </Acknowledgements>
+                  </div>
                 </div>
-              </Priority>
-            </Memo(PriorityLabels)>
-          </div>
-          <div
-            className="post__body"
-          >
-            <Connect(Markdown)
-              message="message"
-              options={
-                Object {
-                  "disableGroupHighlight": true,
-                  "mentionHighlight": false,
-                }
-              }
-            >
-              <Markdown
-                autolinkedUrlSchemes={
-                  Array [
-                    "http",
-                    "https",
-                    "ftp",
-                    "mailto",
-                    "tel",
-                    "mattermost",
-                  ]
-                }
-                channelNamesMap={Object {}}
-                dispatch={[Function]}
-                emojiMap={
-                  EmojiMap {
-                    "customEmojis": Map {},
-                    "customEmojisArray": Array [],
-                  }
-                }
-                enableFormatting={true}
-                hasImageProxy={false}
-                managedResourcePaths={Array []}
-                mentionKeys={Array []}
-                message="message"
-                minimumHashtagLength={NaN}
-                options={
-                  Object {
-                    "disableGroupHighlight": true,
-                    "mentionHighlight": false,
-                  }
-                }
-                siteURL="http://localhost:8065"
-                team={
-                  Object {
-                    "display_name": "Team ID",
-                    "id": "team_id",
-                    "name": "team-id",
-                  }
-                }
-              >
-                <p
-                  key="0"
-                >
-                  message
-                </p>
-              </Markdown>
-            </Connect(Markdown)>
-          </div>
-        </div>
+              </div>
+            </div>
+          </ShowMore>
+        </Connect(ShowMore)>
       </div>
     </div>
   </PanelBody>
diff --git a/webapp/channels/src/components/drafts/panel/panel_body.test.tsx b/webapp/channels/src/components/drafts/panel/panel_body.test.tsx
index 210398f9ea..61a9aa9fcf 100644
--- a/webapp/channels/src/components/drafts/panel/panel_body.test.tsx
+++ b/webapp/channels/src/components/drafts/panel/panel_body.test.tsx
@@ -70,6 +70,12 @@ describe('components/drafts/panel/panel_body', () => {
                 },
             },
         },
+        views: {
+            rhs: {
+                isSidebarExpanded: false,
+                isSidebarOpen: false,
+            },
+        },
     };
 
     it('should match snapshot', () => {
diff --git a/webapp/channels/src/components/drafts/panel/panel_body.tsx b/webapp/channels/src/components/drafts/panel/panel_body.tsx
index d2330f20bc..331cb426ea 100644
--- a/webapp/channels/src/components/drafts/panel/panel_body.tsx
+++ b/webapp/channels/src/components/drafts/panel/panel_body.tsx
@@ -12,6 +12,7 @@ import {getCurrentRelativeTeamUrl} from 'mattermost-redux/selectors/entities/tea
 import PriorityLabels from 'components/advanced_text_editor/priority_labels';
 import FilePreview from 'components/file_preview';
 import Markdown from 'components/markdown';
+import ShowMore from 'components/post_view/show_more';
 import ProfilePicture from 'components/profile_picture';
 
 import {imageURLForUser, handleFormattedTextClick} from 'utils/utils';
@@ -66,37 +67,43 @@ function PanelBody({
                     src={imageURLForUser(userId)}
                 />
             </div>
-            <div
-                onClick={handleClick}
-                className='post__content'
-            >
-                <div className='DraftPanelBody__right'>
-                    <div className='post__header'>
-                        <strong>{displayName}</strong>
-                        {priority && (
-                            <PriorityLabels
-                                canRemove={false}
-                                padding='0 0 0 8px'
-                                hasError={false}
-                                persistentNotifications={priority.persistent_notifications}
-                                priority={priority.priority}
-                                requestedAck={priority.requested_ack}
-                            />
-                        )}
+            <div className='DraftPanelBody__post_body'>
+                <ShowMore
+                    text={message}
+                >
+                    <div
+                        onClick={handleClick}
+                        className='post__content'
+                    >
+                        <div className='DraftPanelBody__right'>
+                            <div className='post__header'>
+                                <strong>{displayName}</strong>
+                                {priority && (
+                                    <PriorityLabels
+                                        canRemove={false}
+                                        padding='0 0 0 8px'
+                                        hasError={false}
+                                        persistentNotifications={priority.persistent_notifications}
+                                        priority={priority.priority}
+                                        requestedAck={priority.requested_ack}
+                                    />
+                                )}
+                            </div>
+                            <div className='post__body'>
+                                <Markdown
+                                    options={OPTIONS}
+                                    message={message}
+                                />
+                            </div>
+                        </div>
                     </div>
-                    <div className='post__body'>
-                        <Markdown
-                            options={OPTIONS}
-                            message={message}
-                        />
-                    </div>
-                    {(fileInfos.length > 0 || uploadsInProgress?.length > 0) && (
-                        <FilePreview
-                            fileInfos={fileInfos}
-                            uploadsInProgress={uploadsInProgress}
-                        />
-                    )}
-                </div>
+                </ShowMore>
+                {(fileInfos.length > 0 || uploadsInProgress?.length > 0) && (
+                    <FilePreview
+                        fileInfos={fileInfos}
+                        uploadsInProgress={uploadsInProgress}
+                    />
+                )}
             </div>
         </div>
     );