Adjust custom emoji size

src/components/common/CustomEmoji.tsx

@@ -7,6 +7,7 @@ import type { FC, TeactNode } from '../../lib/teact/teact';
 import type { ObserveFn } from '../../hooks/useIntersectionObserver';
 import { ApiMessageEntityTypes } from '../../api/types';
 
+import { REM } from './helpers/mediaDimensions';
 import { getPropertyHexColor } from '../../util/themeStyle';
 import { hexToRgb } from '../../util/switchTheme';
 import buildClassName from '../../util/buildClassName';
@@ -72,12 +73,14 @@ const CustomEmoji: FC<OwnProps> = ({
   const [customColor, setCustomColor] = useState<[number, number, number] | undefined>();
   const hasCustomColor = customEmoji && selectIsDefaultEmojiStatusPack(getGlobal(), customEmoji.stickerSetInfo);
 
+  const [realSize, setRealSize] = useState<number>(size);
+
   useEffect(() => {
-    if (!hasCustomColor || !containerRef.current) {
+    if (!hasCustomColor) {
       setCustomColor(undefined);
       return;
     }
-    const hexColor = getPropertyHexColor(getComputedStyle(containerRef.current), '--emoji-status-color');
+    const hexColor = getPropertyHexColor(getComputedStyle(containerRef.current!), '--emoji-status-color');
     if (!hexColor) {
       setCustomColor(undefined);
       return;
@@ -86,6 +89,13 @@ const CustomEmoji: FC<OwnProps> = ({
     setCustomColor([customColorRgb.r, customColorRgb.g, customColorRgb.b]);
   }, [hasCustomColor]);
 
+  useEffect(() => {
+    const computedSize = getComputedStyle(containerRef.current!).getPropertyValue('--custom-emoji-size');
+    if (computedSize) {
+      setRealSize(Math.round(Number(computedSize.replace(/[^\d.]/g, '')) * REM));
+    }
+  }, []);
+
   const handleVideoEnded = useCallback((e) => {
     if (!loopLimit) return;
 
@@ -136,7 +146,7 @@ const CustomEmoji: FC<OwnProps> = ({
           containerRef={containerRef}
           sticker={customEmoji}
           isSmall
-          size={size}
+          size={realSize}
           customColor={customColor}
           thumbClassName={styles.thumb}
           fullMediaClassName={styles.media}

src/components/common/EmbeddedMessage.scss

@@ -106,7 +106,7 @@
 
     .custom-emoji {
       // Custom emoji needs to be slightly bigger than normal emoji
-      --custom-emoji-size: calc(1.125 * var(--message-text-size, 1rem) + 1px);
+      --custom-emoji-size: max(calc(1.125 * var(--message-text-size, 1rem) + 1px), 20px);
       margin-inline-end: 1px;
 
       & > img {

src/components/middle/MiddleHeader.scss

@@ -521,7 +521,7 @@
         }
 
         .custom-emoji {
-          --custom-emoji-size: 1.125rem;
+          --custom-emoji-size: 1.25rem;
         }
       }
     }

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

@@ -445,7 +445,9 @@
     }
 
     .custom-emoji {
-      --custom-emoji-size: calc(1.25 * var(--message-text-size, 1rem));
+      --custom-emoji-size: max(calc(1.25 * var(--message-text-size, 1rem)), 20px);
+      width: var(--custom-emoji-size);
+      height: var(--custom-emoji-size);
     }
   }