From 76e5f58b1fc0026e9dc6484dec3dd94c69292540 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Przemys=C5=82aw=20J=C3=B3=C5=BAwik?=
 <przemyslaw.jozwik@wire.com>
Date: Tue, 17 Jan 2023 13:25:21 +0100
Subject: [PATCH] fix: Very long name causes misaligned system message (#14507)

---
 .../Message/DecryptErrorMessage.tsx           | 29 +++++++++++--------
 .../Message/VerificationMessage.tsx           |  8 ++---
 .../content/conversation/message-list.less    |  4 +++
 3 files changed, 25 insertions(+), 16 deletions(-)

diff --git a/src/script/components/MessagesList/Message/DecryptErrorMessage.tsx b/src/script/components/MessagesList/Message/DecryptErrorMessage.tsx
index 6401529d487..cb8f65a07ee 100644
--- a/src/script/components/MessagesList/Message/DecryptErrorMessage.tsx
+++ b/src/script/components/MessagesList/Message/DecryptErrorMessage.tsx
@@ -52,20 +52,24 @@ const DecryptErrorMessage: React.FC<DecryptErrorMessageProps> = ({message, onCli
         <div className="message-header-icon">
           <span className="icon-sysmsg-error text-red" />
         </div>
-        <div className="message-header-label ellipsis">
-          <span dangerouslySetInnerHTML={{__html: caption}} />
-          <span>&nbsp;</span>
-          <a
-            className="accent-text"
-            href={link}
-            rel="nofollow noopener noreferrer"
-            target="_blank"
-            data-uie-name="go-decrypt-error-link"
-          >
-            {t('conversationUnableToDecryptLink')}
-          </a>
+
+        <div className="message-header-label">
+          <p>
+            <span dangerouslySetInnerHTML={{__html: caption}} />
+            <span>&nbsp;</span>
+            <a
+              className="accent-text"
+              href={link}
+              rel="nofollow noopener noreferrer"
+              target="_blank"
+              data-uie-name="go-decrypt-error-link"
+            >
+              {t('conversationUnableToDecryptLink')}
+            </a>
+          </p>
         </div>
       </div>
+
       <div className="message-body message-body-decrypt-error">
         <p className="message-header-decrypt-error-label" data-uie-name="status-decrypt-error">
           {message.code && (
@@ -81,6 +85,7 @@ const DecryptErrorMessage: React.FC<DecryptErrorMessageProps> = ({message, onCli
             </>
           )}
         </p>
+
         {message.isRecoverable && (
           <div className="message-header-decrypt-reset-session">
             {isResettingSession ? (
diff --git a/src/script/components/MessagesList/Message/VerificationMessage.tsx b/src/script/components/MessagesList/Message/VerificationMessage.tsx
index 22f4bb8c2bb..120700ed1b9 100644
--- a/src/script/components/MessagesList/Message/VerificationMessage.tsx
+++ b/src/script/components/MessagesList/Message/VerificationMessage.tsx
@@ -63,7 +63,7 @@ const VerificationMessage: React.FC<VerificationMessageProps> = ({message}) => {
         <VerifiedIcon isVerified={isTypeVerified} />
       </div>
       <div
-        className="message-header-label"
+        className="message-header-label message-header-label--verification"
         data-uie-name="element-message-verification"
         data-uie-value={verificationMessageType}
       >
@@ -71,7 +71,7 @@ const VerificationMessage: React.FC<VerificationMessageProps> = ({message}) => {
         {isTypeUnverified && (
           <>
             <span className="message-header-sender-name">{unsafeSenderName}</span>
-            <span className="ellipsis">{t('conversationDeviceUnverified')}</span>
+            <span>{t('conversationDeviceUnverified')}</span>
             <button
               type="button"
               className="button-reset-default message-verification-action accent-text"
@@ -87,7 +87,7 @@ const VerificationMessage: React.FC<VerificationMessageProps> = ({message}) => {
         {isTypeNewDevice && (
           <>
             <span className="message-header-plain-sender-name">{nameList}</span>
-            <span className="ellipsis">
+            <span>
               {hasMultipleUsers ? t('conversationDeviceStartedUsingMany') : t('conversationDeviceStartedUsingOne')}
             </span>
             <button
@@ -102,7 +102,7 @@ const VerificationMessage: React.FC<VerificationMessageProps> = ({message}) => {
         )}
         {isTypeNewMember && (
           <>
-            <span className="ellipsis">{t('conversationDeviceNewPeopleJoined')}</span>
+            <span>{t('conversationDeviceNewPeopleJoined')}</span>
             &nbsp;
             <button
               type="button"
diff --git a/src/style/content/conversation/message-list.less b/src/style/content/conversation/message-list.less
index d57bd94fda7..57abcf8fb54 100644
--- a/src/style/content/conversation/message-list.less
+++ b/src/style/content/conversation/message-list.less
@@ -181,6 +181,10 @@
   font-weight: @font-weight-regular;
   white-space: normal;
 
+  &--verification {
+    display: inline;
+  }
+
   a {
     cursor: pointer;
   }