Action Messages: Draw message in one row (#2520)

src/components/middle/ActionMessage.tsx

@@ -210,7 +210,7 @@ const ActionMessage: FC<OwnProps & StateProps> = ({
       onMouseDown={handleMouseDown}
       onContextMenu={handleContextMenu}
     >
-      {!isSuggestedAvatar && <span>{content}</span>}
+      {!isSuggestedAvatar && <span className="action-message-content">{content}</span>}
       {isGift && renderGift()}
       {isSuggestedAvatar && (
         <ActionMessageSuggestedAvatar

src/components/middle/MessageList.scss

@@ -279,6 +279,14 @@
     }
   }
 
+  .action-message-content {
+    max-width: 100%;
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
   .ActionMessage.centered-action {
     display: flex;
     flex-direction: column;
@@ -377,6 +385,7 @@
   .ActionMessage {
     margin-top: 0.5rem;
     margin-bottom: 0.5rem;
+    height: 1.5625rem;
   }
 
   .ActionMessage {
@@ -398,7 +407,7 @@
   }
 
   .sticky-date + .ActionMessage {
-    margin-top: -0.5rem;
+    margin-top: -0.375rem;
   }
 
   @media (min-width: 1276px) {