Message, Dialog: Various markup fixes, wider bubbles (#1356)

src/components/middle/message/Message.scss

@@ -14,7 +14,8 @@
   --secondary-color: var(--color-text-secondary);
   --meta-safe-area-base: 2.25rem;
   --meta-safe-author-width: 0px;
-  --meta-safe-area-size: calc(var(--meta-safe-area-base) + var(--meta-safe-author-width));
+  --meta-safe-area-extra-width: 0px;
+  --meta-safe-area-size: calc(var(--meta-safe-area-base) + var(--meta-safe-author-width) + var(--meta-safe-area-extra-width));
   --deleting-translate-x: -50%;
   --select-message-scale: 0.9;
   --select-background-color: white;
@@ -131,14 +132,22 @@
   }
 
   &.has-views {
-    --meta-safe-area-size: calc(var(--meta-safe-area-base) + var(--meta-safe-author-width) + 4rem);
+    --meta-safe-area-extra-width: 4rem;
   }
 
   &.was-edited {
-    --meta-safe-area-size: calc(var(--meta-safe-area-base) + var(--meta-safe-author-width) + 2.5rem);
+    --meta-safe-area-extra-width: 2.5rem;
 
     &.has-views {
-      --meta-safe-area-size: calc(var(--meta-safe-area-base) + var(--meta-safe-author-width) + 7.5rem);
+      --meta-safe-area-extra-width: 7.5rem;
+    }
+
+    html[lang=ru] & {
+      --meta-safe-area-extra-width: 3.5rem;
+
+      &.has-views {
+        --meta-safe-area-extra-width: 8.5rem;
+      }
     }
   }
 

src/components/middle/message/Message.tsx

@@ -334,6 +334,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
     hasThread,
     forceSenderName,
     hasComments: message.threadInfo && message.threadInfo.messagesCount > 0,
+    hasActionButton: canForward || canFocus,
   });
   const withCommentButton = message.threadInfo && (!isInDocumentGroup || isLastInDocumentGroup)
     && messageListType === 'thread' && !noComments;
@@ -580,6 +581,11 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
     );
     const hasCustomAppendix = isLastInGroup && !textParts && !asForwarded && !hasThread;
     const shouldInlineMeta = !webPage && !animatedEmoji && textParts;
+    const textContentClass = buildClassName(
+      'text-content',
+      shouldInlineMeta && 'with-meta',
+      outgoingStatus && 'with-outgoing-icon',
+    );
 
     return (
       <div className={className} onDoubleClick={handleContentDoubleClick} dir="auto">
@@ -688,7 +694,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
           <Poll message={message} poll={poll} onSendVote={handleVoteSend} />
         )}
         {!animatedEmoji && textParts && (
-          <p className={`text-content ${shouldInlineMeta ? 'with-meta' : ''}`} dir="auto">
+          <p className={textContentClass} dir="auto">
             {textParts}
             {shouldInlineMeta && (
               <MessageMeta

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

@@ -3,29 +3,44 @@
   max-width: var(--max-width);
 
   @media (max-width: 600px) {
-    max-width: calc(100vw - 7rem);
+    max-width: calc(100vw - 5.5rem);
+
+    .Message.own &,
+    .MessageList.no-avatars & {
+      max-width: calc(100vw - 3rem);
+    }
 
     // Workaround for sass function override - we should use CSS min() here
-    @supports (max-width: #{"min(29rem, 100vw - 7rem)"}) {
+    @supports (max-width: #{"min(29rem, 100vw - 5.5rem)"}) {
-      max-width: #{"min(29rem, 100vw - 7rem)"};
+      max-width: #{"min(29rem, 100vw - 5.5rem)"};
+      .MessageList.no-avatars & {
+        max-width: #{"min(29rem, 100vw - 3rem)"};
+      }
+      .Message.own & {
+        max-width: #{"min(30rem, 100vw - 3rem)"};
+      }
     }
 
+    &.has-action-button {
+      max-width: calc(100vw - 7rem);
+
+      .Message.own &,
       .MessageList.no-avatars & {
         max-width: calc(100vw - 4.5rem);
+      }
 
-      @supports (max-width: #{"min(29rem, 100vw - 4.5rem)"}) {
+      // Workaround for sass function override - we should use CSS min() here
+      @supports (max-width: #{"min(29rem, 100vw - 5.5rem)"}) {
+        max-width: #{"min(29rem, 100vw - 7rem)"};
+        .MessageList.no-avatars & {
           max-width: #{"min(29rem, 100vw - 4.5rem)"};
         }
-    }
-
         .Message.own & {
-      max-width: calc(100vw - 4.5rem);
-
-      @supports (max-width: #{"min(30rem, 100vw - 4.5rem)"}) {
           max-width: #{"min(30rem, 100vw - 4.5rem)"};
         }
       }
     }
+  }
 
   .text-content {
     margin: 0;
@@ -40,7 +55,7 @@
     unicode-bidi: plaintext;
   }
 
-  &:not(.custom-shape) .text-content,
+  &:not(.custom-shape) .text-content:not(.with-meta),
   &.document {
     & > .MessageMeta {
       position: relative;
@@ -201,11 +216,23 @@
   &.has-solid-background {
     padding: .3125rem .5rem .375rem;
 
+    .forwarded-message  .text-content.with-meta {
+      &.with-outgoing-icon:last-child {
+        --meta-icon-width: .5rem;
+      }
+
+      .MessageMeta {
+        bottom: -.25rem;
+      }
+    }
+
+    .text-content.with-meta:last-child::after,
     .forwarded-message > .text-content:not(.with-meta):last-child::after {
       content: '';
       display: inline-block;
-      width: var(--meta-safe-area-size);
+      width: calc(var(--meta-safe-area-size) + var(--meta-icon-width, 0px));
       height: 1rem;
+      float: right;
     }
   }
 

src/components/middle/message/helpers/buildContentClassName.ts

@@ -16,6 +16,7 @@ export function buildContentClassName(
     hasThread,
     forceSenderName,
     hasComments,
+    hasActionButton,
   }: {
     hasReply?: boolean;
     customShape?: boolean | number;
@@ -24,6 +25,7 @@ export function buildContentClassName(
     hasThread?: boolean;
     forceSenderName?: boolean;
     hasComments?: boolean;
+    hasActionButton?: boolean;
   } = {},
 ) {
   const {
@@ -41,6 +43,10 @@ export function buildContentClassName(
     classNames.push('text');
   }
 
+  if (hasActionButton) {
+    classNames.push('has-action-button');
+  }
+
   if (customShape) {
     classNames.push('custom-shape');
     if (video && video.isRound) {

src/components/ui/Modal.scss

@@ -8,6 +8,12 @@
     }
   }
 
+  &.error {
+    .modal-content > div {
+      margin-top: 1rem;
+    }
+  }
+
   &.narrow {
     .modal-dialog {
       max-width: 20rem;