fix: Very long name causes misaligned system message (#14507)

wireapp · Jan 17, 2023 · 76e5f58 · 76e5f58
1 parent fbd69b5
commit 76e5f58
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 16 deletions.
diff --git 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
@@ -63,15 +63,15 @@ 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}
       >
         {isTypeVerified && <span>{t('tooltipConversationAllVerified')}</span>}
         {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
@@ -181,6 +181,10 @@
   font-weight: @font-weight-regular;
   white-space: normal;
 
+  &--verification {
+    display: inline;
+  }
+
   a {
     cursor: pointer;
   }