Header Pinned Message: Fix text cutting off (#3483)

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}
       />
     );
   }

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;

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>