[FIX] Pinned Message display cutting off information (#25535)

* fix(MessageAttachment): Pinned Message display * fix: fixing yarn lock file * fix: adding white space style to Pinned Messages * fix: sending yarn.lock * review Co-authored-by: gabriellsh <gabriel.henriques@rocket.chat>
RocketChat · May 23, 2022 · 8c75345 · 8c75345
1 parent 5292957
commit 8c75345
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 5 deletions.
diff --git a/apps/meteor/client/components/Message/Attachments/Attachment/Attachment.tsx b/apps/meteor/client/components/Message/Attachments/Attachment/Attachment.tsx
@@ -1,11 +1,26 @@
+import { css } from '@rocket.chat/css-in-js';
 import { Box } from '@rocket.chat/fuselage';
 import { useAttachmentDimensions } from '@rocket.chat/ui-contexts';
 import React, { ComponentProps, FC } from 'react';
 
+const className = css`
+	white-space: normal;
+`;
+
 const Attachment: FC<ComponentProps<typeof Box>> = (props) => {
 	const { width } = useAttachmentDimensions();
 	return (
-		<Box rcx-message-attachment mb='x4' maxWidth={width} width='full' display='flex' overflow='hidden' flexDirection='column' {...props} />
+		<Box
+			rcx-message-attachment
+			mb='x4'
+			maxWidth={width}
+			width='full'
+			display='flex'
+			overflow='hidden'
+			flexDirection='column'
+			className={className}
+			{...props}
+		/>
 	);
 };
 

diff --git a/apps/meteor/client/components/Message/Attachments/DefaultAttachment.tsx b/apps/meteor/client/components/Message/Attachments/DefaultAttachment.tsx
@@ -1,5 +1,5 @@
 import { isActionAttachment, MarkdownFields, MessageAttachmentDefault } from '@rocket.chat/core-typings';
-import React, { FC, ReactNode } from 'react';
+import React, { FC, ReactNode, ComponentProps } from 'react';
 
 import MarkdownText from '../../MarkdownText';
 import { ActionAttachment } from './ActionAttachtment';
@@ -11,7 +11,8 @@ const applyMarkdownIfRequires = (
 	list: MessageAttachmentDefault['mrkdwn_in'] = ['text', 'pretext'],
 	key: MarkdownFields,
 	text: string,
-): ReactNode => (list?.includes(key) ? <MarkdownText parseEmoji variant='inline' content={text} /> : text);
+	variant: ComponentProps<typeof MarkdownText>['variant'] = 'inline',
+): ReactNode => (list?.includes(key) ? <MarkdownText parseEmoji variant={variant} content={text} /> : text);
 
 const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
 	const [collapsed, collapse] = useCollapse(!!attachment.collapsed);
@@ -58,7 +59,9 @@ const DefaultAttachment: FC<MessageAttachmentDefault> = (attachment) => {
 				)}
 				{!collapsed && (
 					<>
-						{attachment.text && <Attachment.Text>{applyMarkdownIfRequires(attachment.mrkdwn_in, 'text', attachment.text)}</Attachment.Text>}
+						{attachment.text && (
+							<Attachment.Text>{applyMarkdownIfRequires(attachment.mrkdwn_in, 'text', attachment.text, 'document')}</Attachment.Text>
+						)}
 						{/* {attachment.fields && <FieldsAttachment fields={attachment.mrkdwn_in?.includes('fields') ? attachment.fields.map(({ value, ...rest }) => ({ ...rest, value: <MarkdownText withRichContent={null} content={value} /> })) : attachment.fields} />} */}
 						{attachment.fields && (
 							<FieldsAttachment

diff --git a/apps/meteor/client/components/Message/Attachments/QuoteAttachment.tsx b/apps/meteor/client/components/Message/Attachments/QuoteAttachment.tsx
@@ -52,7 +52,7 @@ export const QuoteAttachment: FC<MessageQuoteAttachment> = ({
 							</Box>
 						)}
 					</Attachment.Author>
-					<MarkdownText parseEmoji variant='inline' content={text} />
+					<MarkdownText parseEmoji variant='document' content={text} />
 					{attachments && (
 						<Attachment.Inner mbe='-12px'>
 							<Attachments attachments={attachments} />