Comment Button: Fix with tall action buttons (#5679)

src/components/middle/message/CommentButton.scss

@@ -111,6 +111,22 @@
     }
   }
 
+  &.as-action-button {
+    position: static;
+    background-color: transparent;
+
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.08);
+      backdrop-filter: none;
+      filter: none;
+    }
+
+    &::after {
+      top: 1.5rem;
+      bottom: auto;
+    }
+  }
+
   &:hover {
     background: var(--hover-color);
 

src/components/middle/message/CommentButton.tsx

@@ -24,6 +24,7 @@ type OwnProps = {
   disabled?: boolean;
   isLoading?: boolean;
   isCustomShape?: boolean;
+  asActionButton?: boolean;
 };
 
 const SHOW_LOADER_DELAY = 450;
@@ -33,6 +34,7 @@ const CommentButton: FC<OwnProps> = ({
   threadInfo,
   disabled,
   isLoading,
+  asActionButton,
 }) => {
   const { openThread } = getActions();
 
@@ -100,6 +102,7 @@ const CommentButton: FC<OwnProps> = ({
         disabled && 'disabled',
         isCustomShape && 'CommentButton-custom-shape',
         isLoading && 'loading',
+        asActionButton && 'as-action-button',
       )}
       dir={lang.isRtl ? 'rtl' : 'ltr'}
       onClick={handleClick}

src/components/middle/message/Message.tsx

@@ -1625,6 +1625,15 @@ const Message: FC<OwnProps & StateProps> = ({
               isLoadingComments && 'message-action-buttons-shown',
             )}
             >
+              {withCommentButton && isCustomShape && (
+                <CommentButton
+                  threadInfo={repliesThreadInfo}
+                  disabled={noComments}
+                  isLoading={isLoadingComments}
+                  isCustomShape
+                  asActionButton
+                />
+              )}
               {canForward && (
                 <Button
                   className="message-action-button"
@@ -1651,12 +1660,11 @@ const Message: FC<OwnProps & StateProps> = ({
               )}
             </div>
           )}
-          {withCommentButton && (
+          {withCommentButton && !(canShowActionButton && isCustomShape) && (
             <CommentButton
               threadInfo={repliesThreadInfo}
               disabled={noComments}
               isLoading={isLoadingComments}
-              isCustomShape={isCustomShape}
             />
           )}
           {withAppendix && <MessageAppendix isOwn={isOwn} />}