Merge pull request #1075 from GetStream/virtual-message-simple

Virtual message simple

Author: DanC5

CHANGELOG.md

@@ -9,6 +9,7 @@
 ### Chore
 
 - Replace `replaceAll` method with `replace` and add global flag for older browser support [#1074](https://github.com/GetStream/stream-chat-react/pull/1074)
+- Adjust `VirtualizedMessageList` CSS to support `MessageSimple` [#1075](https://github.com/GetStream/stream-chat-react/pull/1075)
 
 ## [6.4.6](https://github.com/GetStream/stream-chat-react/releases/tag/v6.4.6) 2021-07-23
 

src/components/MessageList/VirtualizedMessageList.tsx

@@ -19,7 +19,7 @@ import { DateSeparator as DefaultDateSeparator } from '../DateSeparator/DateSepa
 import { EmptyStateIndicator as DefaultEmptyStateIndicator } from '../EmptyStateIndicator/EmptyStateIndicator';
 import { EventComponent } from '../EventComponent/EventComponent';
 import { LoadingIndicator as DefaultLoadingIndicator } from '../Loading/LoadingIndicator';
-import { FixedHeightMessage, Message, MessageUIComponentProps } from '../Message';
+import { Message, MessageSimple, MessageUIComponentProps } from '../Message';
 
 import {
   ChannelActionContextValue,
@@ -100,7 +100,7 @@ const VirtualizedMessageListWithContext = <
     MessageNotification = DefaultMessageNotification,
     MessageSystem = EventComponent,
     TypingIndicator = null,
-    VirtualMessage: contextMessage = FixedHeightMessage,
+    VirtualMessage: contextMessage = MessageSimple,
   } = useComponentContext<At, Ch, Co, Ev, Me, Re, Us>();
 
   const { t } = useTranslationContext();

src/styles/MessageList.scss

@@ -164,6 +164,12 @@
 
   p {
     margin: 0 !important; // always use padding, margin mess up the height calculations
+
+    a {
+      white-space: pre-line;
+      overflow: hidden;
+      word-wrap: break-word;
+    }
   }
 }
 

src/styles/VirtualMessage.scss

@@ -1,6 +1,6 @@
 .str-chat__virtual-list {
   .str-chat__virtual-list-message-wrapper {
-    // display: inline-block;
+    padding: 20px 40px;
     width: 100%;
   }