Merge pull request #773 from GetStream/virtual-message-list-short-messages

Fix handling of 1px tall messages

Author: DanC5

src/components/MessageList/VirtualizedMessageList.js

@@ -118,13 +118,7 @@ const VirtualizedMessageList = ({
      */
     const Item = (props) => {
       return (
-        <div
-          {...props}
-          style={{
-            display: 'inline-block',
-            width: '100%',
-          }}
-        />
+        <div {...props} className="str-chat__virtual-list-message-wrapper" />
       );
     };
 

src/styles/VirtualMessage.scss

@@ -24,6 +24,8 @@
 }
 
 .str-chat__virtual-list {
+  // this resolves the issue with 1px tall messages (i.e. deleted messages)
+  font-size: 0;
   .str-chat__message.str-chat__message--deleted {
     align-items: initial;
     padding: 16px 42px;
@@ -35,6 +37,11 @@
   }
 }
 
+.str-chat__virtual-list-message-wrapper {
+  display: inline-block;
+  width: 100%;
+}
+
 .str-chat__virtual-message__meta {
   display: flex;
   flex-direction: row;