From d922f0595f64cb83bbbb38cd2455af4ac71d16f5 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 12 May 2021 15:29:38 +0300
Subject: [PATCH] Message: Fix width for Comment Button (#1086)

---
 src/components/middle/message/Message.tsx     | 21 +++++++++++++------
 .../middle/message/_message-content.scss      |  5 +++++
 .../middle/message/helpers/mediaDimensions.ts |  7 +++++--
 3 files changed, 25 insertions(+), 8 deletions(-)

diff --git a/src/components/middle/message/Message.tsx b/src/components/middle/message/Message.tsx
index a166573b9..916330553 100644
--- a/src/components/middle/message/Message.tsx
+++ b/src/components/middle/message/Message.tsx
@@ -86,7 +86,7 @@ import Invoice from './Invoice';
 import Album from './Album';
 import RoundVideo from './RoundVideo';
 import InlineButtons from './InlineButtons';
-import CommentsButton from './CommentButton';
+import CommentButton from './CommentButton';
 
 import './Message.scss';
 
@@ -158,6 +158,7 @@ const APPENDIX_OWN = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/s
 // eslint-disable-next-line max-len
 const APPENDIX_NOT_OWN = '<svg width="9" height="20" xmlns="http://www.w3.org/2000/svg"><defs><filter x="-50%" y="-14.7%" width="200%" height="141.2%" filterUnits="objectBoundingBox" id="a"><feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/><feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/><feColorMatrix values="0 0 0 0 0.0621962482 0 0 0 0 0.138574144 0 0 0 0 0.185037364 0 0 0 0.15 0" in="shadowBlurOuter1"/></filter></defs><g fill="none" fill-rule="evenodd"><path d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" fill="#000" filter="url(#a)"/><path d="M3 17h6V0c-.193 2.84-.876 5.767-2.05 8.782-.904 2.325-2.446 4.485-4.625 6.48A1 1 0 003 17z" fill="#FFF" class="corner"/></g></svg>';
 const APPEARANCE_DELAY = 10;
+const NO_MEDIA_CORNERS_THRESHOLD = 18;
 
 const Message: FC<OwnProps & StateProps & DispatchProps> = ({
   message,
@@ -297,6 +298,8 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
   const signature = (
     (isChannel && message.adminTitle) || (forwardInfo && !asForwarded && forwardInfo.adminTitle) || undefined
   );
+  const withCommentButton = message.threadInfo && (!isInDocumentGroup || isLastInDocumentGroup)
+    && messageListType === 'thread' && !noComments;
 
   useEnsureMessage(chatId, hasReply ? message.replyToMessageId : undefined, replyMessage, message.id);
   useFocusMessage(ref, chatId, isFocused, focusDirection, noFocusHighlight);
@@ -438,6 +441,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
 
   let style = '';
   let calculatedWidth;
+  let noMediaCorners = false;
   const albumLayout = useMemo(() => {
     return isAlbum ? calculateAlbumLayout(isOwn, Boolean(asForwarded), album!, windowWidth) : undefined;
   }, [isAlbum, windowWidth, isOwn, asForwarded, album]);
@@ -456,10 +460,16 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
     }
 
     if (width) {
-      calculatedWidth = Math.max(getMinMediaWidth(Boolean(text)), width);
+      calculatedWidth = Math.max(getMinMediaWidth(Boolean(text), withCommentButton), width);
+      if (calculatedWidth - width > NO_MEDIA_CORNERS_THRESHOLD) {
+        noMediaCorners = true;
+      }
     }
   } else if (albumLayout) {
-    calculatedWidth = Math.max(getMinMediaWidth(Boolean(text)), albumLayout.containerStyle.width);
+    calculatedWidth = Math.max(getMinMediaWidth(Boolean(text), withCommentButton), albumLayout.containerStyle.width);
+    if (calculatedWidth - albumLayout.containerStyle.width > NO_MEDIA_CORNERS_THRESHOLD) {
+      noMediaCorners = true;
+    }
   }
 
   if (calculatedWidth) {
@@ -489,6 +499,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
       'content-inner',
       asForwarded && !customShape && 'forwarded-message',
       hasReply && 'reply-message',
+      noMediaCorners && 'no-media-corners',
     );
     const hasCustomAppendix = isLastInGroup && !textParts && !asForwarded && !hasThread;
 
@@ -678,8 +689,6 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
     (forwardInfo && (forwardInfo.isChannelPost || (isChatWithSelf && !isOwn)) && forwardInfo.fromMessageId)
     || isPinnedList
   );
-  const showCommentsButton = message.threadInfo && (!isInDocumentGroup || isLastInDocumentGroup)
-    && messageListType === 'thread' && !noComments;
 
   return (
     <div
@@ -764,7 +773,7 @@ const Message: FC<OwnProps & StateProps & DispatchProps> = ({
               <i className="icon-arrow-right" />
             </Button>
           ) : undefined}
-          {showCommentsButton && <CommentsButton message={message} disabled={noComments} />}
+          {withCommentButton && <CommentButton message={message} disabled={noComments} />}
         </div>
         {message.inlineButtons && (
           <InlineButtons message={message} onClick={clickInlineButton} />
diff --git a/src/components/middle/message/_message-content.scss b/src/components/middle/message/_message-content.scss
index 7ca6b1957..a7f22889d 100644
--- a/src/components/middle/message/_message-content.scss
+++ b/src/components/middle/message/_message-content.scss
@@ -223,6 +223,11 @@
     width: calc(1.25 * var(--message-text-size, 1rem));
     background-size: calc(1.25 * var(--message-text-size, 1rem));
   }
+
+  .no-media-corners {
+    --border-top-left-radius: 0;
+    --border-top-right-radius: 0;
+  }
 }
 
 .message-content.media {
diff --git a/src/components/middle/message/helpers/mediaDimensions.ts b/src/components/middle/message/helpers/mediaDimensions.ts
index 7b9dcc8f5..4e300e559 100644
--- a/src/components/middle/message/helpers/mediaDimensions.ts
+++ b/src/components/middle/message/helpers/mediaDimensions.ts
@@ -11,11 +11,14 @@ import {
 
 const MIN_MEDIA_WIDTH = 100;
 const MIN_MEDIA_WIDTH_WITH_TEXT = 175;
+const MIN_MEDIA_WIDTH_WITH_TEXT_AND_COMMENTS = 238;
 const MIN_MEDIA_HEIGHT = 90;
 const SMALL_IMAGE_THRESHOLD = 12;
 
-export function getMinMediaWidth(hasText?: boolean) {
-  return hasText ? MIN_MEDIA_WIDTH_WITH_TEXT : MIN_MEDIA_WIDTH;
+export function getMinMediaWidth(hasText?: boolean, hasCommentButton?: boolean) {
+  return hasText
+    ? (hasCommentButton ? MIN_MEDIA_WIDTH_WITH_TEXT_AND_COMMENTS : MIN_MEDIA_WIDTH_WITH_TEXT)
+    : MIN_MEDIA_WIDTH;
 }
 
 export function calculateMediaDimensions(message: ApiMessage) {