Forwards: Fix styles (#5126)

src/components/middle/message/Album.scss

@@ -15,20 +15,6 @@
     margin: -0.3125rem -0.5rem 0.3125rem -0.625rem;
   }
 
-  .forwarded-message & {
-    margin-bottom: 0.125rem;
-
-    .message-content.media.text & {
-      margin: 0 0 0.3125rem;
-      --border-bottom-left-radius: inherit;
-      --border-bottom-right-radius: inherit;
-
-      + .message-paid-media-status {
-        margin-right: 0;
-      }
-    }
-  }
-
   &,
   .message-content.media.text & {
     > .album-item-select-wrapper .media-inner {

src/components/middle/message/Message.scss

@@ -646,7 +646,7 @@
 
   .message-content {
     &.has-replies:not(.custom-shape),
-    &.has-footer:not(.web-page):not(.is-forwarded) {
+    &.has-footer:not(.web-page) {
       .media-inner,
       .Album {
         --border-bottom-left-radius: 0;
@@ -654,7 +654,7 @@
       }
     }
 
-    &.text.is-inverted-media:not(.is-forwarded) {
+    &.text.is-inverted-media {
       .Album,
       .media-inner {
         --border-top-left-radius: 0;

src/components/middle/message/Message.tsx

@@ -927,13 +927,13 @@ const Message: FC<OwnProps & StateProps> = ({
       calculatedWidth = Math.max(
         getMinMediaWidth(text?.text, isMediaWithCommentButton), albumLayout.containerStyle.width,
       );
-      if (!asForwarded && calculatedWidth - albumLayout.containerStyle.width > NO_MEDIA_CORNERS_THRESHOLD) {
+      if (calculatedWidth - albumLayout.containerStyle.width > NO_MEDIA_CORNERS_THRESHOLD) {
         noMediaCorners = true;
       }
     }
 
     if (calculatedWidth) {
-      style = `width: ${calculatedWidth + extraPadding}px`;
+      style = `width: ${calculatedWidth}px`;
       reactionsMaxWidth = calculatedWidth + EXTRA_SPACE_FOR_REACTIONS;
     } else if (sticker && !hasSubheader) {
       const { width } = getStickerDimensions(sticker, isMobile);
@@ -1058,7 +1058,7 @@ const Message: FC<OwnProps & StateProps> = ({
       noMediaCorners && 'no-media-corners',
     );
     const hasCustomAppendix = isLastInGroup
-      && (!hasText || (isInvertedMedia && !hasFactCheck && !hasReactions)) && !asForwarded && !withCommentButton;
+      && (!hasText || (isInvertedMedia && !hasFactCheck && !hasReactions)) && !withCommentButton;
     const textContentClass = buildClassName(
       'text-content',
       'clearfix',
@@ -1467,40 +1467,48 @@ const Message: FC<OwnProps & StateProps> = ({
         {(senderTitle || asForwarded) ? (
           <span
             className={buildClassName(
-              'message-title-name',
+              'message-title-name-container',
               forwardInfo?.hiddenUserName ? 'sender-hidden' : 'interactive',
               senderColor,
             )}
-            onClick={handleSenderClick}
             dir="ltr"
           >
-            {asForwarded && (
+            <span className="forward-title-container">
-              <Icon name={forwardInfo?.hiddenUserName ? 'forward' : 'share-filled'} />
+              {asForwarded && (
-            )}
+                <Icon name={forwardInfo?.hiddenUserName ? 'forward' : 'share-filled'} />
-            {asForwarded && (
+              )}
-              <span className="forward-title">
+              {asForwarded && (
-                {lang('ForwardedFrom')}
+                <span className="forward-title">
+                  {lang('ForwardedFrom')}
+                </span>
+              )}
+            </span>
+            <span className="message-title-name">
+              {storyData && <Icon name="play-story" />}
+              {shouldRenderForwardAvatar && (
+                <Avatar
+                  className="forward-avatar"
+                  peer={senderPeer}
+                  size="micro"
+                />
+              )}
+              <span
+                className="sender-title"
+                onClick={handleSenderClick}
+              >
+                {senderTitle ? renderText(senderTitle) : (asForwarded ? NBSP : undefined)}
               </span>
-            )}
+              {!asForwarded && senderEmojiStatus && (
-            {storyData && <Icon name="play-story" />}
+                <CustomEmoji
-            {shouldRenderForwardAvatar && (
+                  documentId={senderEmojiStatus.documentId}
-              <Avatar
+                  loopLimit={EMOJI_STATUS_LOOP_LIMIT}
-                className="forward-avatar"
+                  observeIntersectionForLoading={observeIntersectionForLoading}
-                peer={senderPeer}
+                  observeIntersectionForPlaying={observeIntersectionForPlaying}
-                size="micro"
+                />
-              />
+              )}
-            )}
+              {!asForwarded && !senderEmojiStatus && senderIsPremium && <StarIcon />}
-            {senderTitle ? renderText(senderTitle) : (asForwarded ? NBSP : undefined)}
+              {senderPeer?.fakeType && <FakeIcon fakeType={senderPeer.fakeType} />}
-            {!asForwarded && senderEmojiStatus && (
+            </span>
-              <CustomEmoji
-                documentId={senderEmojiStatus.documentId}
-                loopLimit={EMOJI_STATUS_LOOP_LIMIT}
-                observeIntersectionForLoading={observeIntersectionForLoading}
-                observeIntersectionForPlaying={observeIntersectionForPlaying}
-              />
-            )}
-            {!asForwarded && !senderEmojiStatus && senderIsPremium && <StarIcon />}
-            {senderPeer?.fakeType && <FakeIcon fakeType={senderPeer.fakeType} />}
           </span>
         ) : !botSender ? (
           NBSP

src/components/middle/message/MessageMeta.scss

@@ -133,17 +133,6 @@
     padding: 0 0.375rem 0 0.3125rem;
   }
 
-  .is-forwarded.media.no-footer:dir(rtl) &,
-  .Message .is-forwarded.custom-shape:dir(rtl) & {
-    left: 0.8125rem;
-  }
-
-  .is-forwarded.media.no-footer & {
-    bottom: 0.9375rem;
-    right: 0.8125rem;
-    max-width: calc(100% - 2.25rem);
-  }
-
   .Message.own .has-solid-background & {
     color: var(--color-message-meta-own);
   }

src/components/middle/message/_message-content.scss

@@ -285,12 +285,33 @@
     color: var(--accent-color);
     unicode-bidi: plaintext;
     display: flex;
+    user-select: none;
 
+    .forward-title-container,
+    .message-title-name-container,
     .message-title-name {
       display: flex;
       align-items: center;
     }
 
+    .message-title-name-container {
+      flex-wrap: wrap;
+    }
+
+    .forward-title-container,
+    .message-title-name {
+      white-space: nowrap;
+    }
+
+    .message-title-name {
+      max-width: 100%;
+    }
+
+    .sender-title {
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
     .forward-title {
       font-weight: normal;
       margin-right: 0.25rem;
@@ -306,19 +327,21 @@
       unicode-bidi: plaintext;
     }
 
-    &.interactive,
-    & > .interactive {
-      cursor: var(--custom-cursor, pointer);
-
-      &:hover {
-        opacity: 0.85;
-      }
-    }
-
     .sender-hidden {
       font-weight: normal;
     }
 
+    &.interactive,
+    & > .interactive {
+      .sender-title {
+        cursor: var(--custom-cursor, pointer);
+
+        &:hover {
+          opacity: 0.85;
+        }
+      }
+    }
+
     & + .File {
       margin-top: 0.25rem;
     }
@@ -593,6 +616,10 @@
     }
   }
 
+  &.is-forwarded.text .media-inner {
+    margin-top: 0;
+  }
+
   &.text .media-inner {
     margin-top: -0.3125rem;
   }
@@ -723,7 +750,7 @@
 }
 
 .message-content.story {
-  max-width: 13.625rem;
+  max-width: 12rem;
 }
 
 .message-content.custom-shape {
@@ -886,7 +913,6 @@
 
 .forwarded-message {
   .message-content.contact &,
-  .message-content.voice &,
   .message-content.poll &,
   .message-content.giveaway & {
     // MessageOutgoingStatus's icon needs more space
@@ -898,14 +924,44 @@
     margin-top: 0.25rem;
   }
 
-  --border-top-left-radius: var(--border-radius-messages-small);
+  --border-top-left-radius: 0;
-  --border-top-right-radius: var(--border-radius-messages-small);
+  --border-top-right-radius: 0;
-  --border-bottom-left-radius: var(--border-radius-messages-small);
-  --border-bottom-right-radius: var(--border-radius-messages-small);
 
+  .has-footer & {
+    --border-bottom-left-radius: 0;
+    --border-bottom-right-radius: 0;
+  }
+
+  .Album,
   .media-inner:not(.file-preview) {
-    margin: 0 !important;
+    margin-left: -0.5rem;
-    margin-bottom: 0.25rem !important;
+    margin-right: -0.5rem;
+
+    body.is-ios .Message.own & {
+      margin-left: -0.625rem;
+    }
+
+    :not(.has-footer) & {
+      margin-bottom: -0.375rem;
+
+      body.is-ios .Message.own & {
+        margin-bottom: -0.4375rem;
+      }
+    }
+  }
+
+  .Album {
+    margin-bottom: 0.125rem;
+
+    .message-content.media.text & {
+      margin-top: 0.25rem;
+      --border-bottom-left-radius: inherit;
+      --border-bottom-right-radius: inherit;
+
+      + .message-paid-media-status {
+        margin-right: 0;
+      }
+    }
   }
 }