From 1e33c04ed476659ad2faf5473649be8735a9b7d0 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 5 Jul 2023 13:16:01 +0200
Subject: [PATCH] Header Pinned Message: Fix text cutting off (#3483)

---
 src/components/common/MessageSummary.tsx              |  3 +++
 src/components/middle/HeaderPinnedMessage.module.scss |  1 +
 src/components/middle/HeaderPinnedMessage.tsx         | 11 +++++++++--
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/components/common/MessageSummary.tsx b/src/components/common/MessageSummary.tsx
index f630bb19e..76bab42e6 100644
--- a/src/components/common/MessageSummary.tsx
+++ b/src/components/common/MessageSummary.tsx
@@ -27,6 +27,7 @@ interface OwnProps {
   observeIntersectionForPlaying?: ObserveFn;
   withTranslucentThumbs?: boolean;
   inChatList?: boolean;
+  emojiSize?: number;
 }
 
 function MessageSummary({
@@ -39,6 +40,7 @@ function MessageSummary({
   observeIntersectionForPlaying,
   withTranslucentThumbs = false,
   inChatList = false,
+  emojiSize,
 }: OwnProps) {
   const { text, entities } = extractMessageText(message, inChatList) || {};
   const hasSpoilers = entities?.some((e) => e.type === ApiMessageEntityTypes.Spoiler);
@@ -69,6 +71,7 @@ function MessageSummary({
         withTranslucentThumbs={withTranslucentThumbs}
         truncateLength={truncateLength}
         inChatList={inChatList}
+        emojiSize={emojiSize}
       />
     );
   }
diff --git a/src/components/middle/HeaderPinnedMessage.module.scss b/src/components/middle/HeaderPinnedMessage.module.scss
index 8872f4258..897c38f9e 100644
--- a/src/components/middle/HeaderPinnedMessage.module.scss
+++ b/src/components/middle/HeaderPinnedMessage.module.scss
@@ -172,6 +172,7 @@
   overflow: hidden;
   text-overflow: ellipsis;
   margin: 0;
+  --custom-emoji-size: 1.125rem;
 
   :global(body.is-ios) & {
     font-size: 0.9375rem;
diff --git a/src/components/middle/HeaderPinnedMessage.tsx b/src/components/middle/HeaderPinnedMessage.tsx
index e0f1885eb..f43338ec5 100644
--- a/src/components/middle/HeaderPinnedMessage.tsx
+++ b/src/components/middle/HeaderPinnedMessage.tsx
@@ -4,7 +4,7 @@ import { getActions } from '../../global';
 
 import type { ApiMessage } from '../../api/types';
 
-import { getPictogramDimensions } from '../common/helpers/mediaDimensions';
+import { getPictogramDimensions, REM } from '../common/helpers/mediaDimensions';
 import {
   getMessageIsSpoiler,
   getMessageMediaHash, getMessageSingleInlineButton,
@@ -34,6 +34,8 @@ import Spinner from '../ui/Spinner';
 import styles from './HeaderPinnedMessage.module.scss';
 
 const SHOW_LOADER_DELAY = 450;
+const EMOJI_SIZE = 1.125 * REM;
+
 type OwnProps = {
   message: ApiMessage;
   index: number;
@@ -169,7 +171,12 @@ const HeaderPinnedMessage: FC<OwnProps> = ({
           </div>
           <Transition activeKey={message.id} name="slideVerticalFade" className={styles.messageTextTransition}>
             <p dir="auto" className={styles.summary}>
-              <MessageSummary lang={lang} message={message} noEmoji={Boolean(mediaThumbnail)} />
+              <MessageSummary
+                lang={lang}
+                message={message}
+                noEmoji={Boolean(mediaThumbnail)}
+                emojiSize={EMOJI_SIZE}
+              />
             </p>
           </Transition>
         </div>