Emoji Modal: Fixes Custom Emoji Sets Modal (#4675)

src/components/common/CustomEmojiSetsModal.module.scss

@@ -1,19 +1,24 @@
 .root {
   :global {
     .modal-dialog {
-      max-width: 26.25rem;
+      height: 70%;
+      max-width: 25rem;
+
+      @media (max-width: 600px) {
+        height: 90%;
+      }
     }
 
     .modal-header {
-      padding: 0.75rem 1.1875rem 0;
+      padding: 0.25rem 0.5rem;
     }
 
     .modal-title.modal-title {
-      margin: 0 0.75rem;
+      margin: 0.5rem 1.1875rem 0.5rem;
     }
 
     .modal-content {
-      padding: 1rem 0 0;
+      padding: 0;
     }
 
     .multiline-menu-item {
@@ -26,6 +31,10 @@
       color: var(--color-text-secondary);
     }
   }
+
+  :global(.sticker-set-cover), :global(.custom-emoji) {
+    --custom-emoji-size: 3rem;
+  }
 }
 
 .sets {
@@ -34,6 +43,6 @@
   min-height: 19rem;
   max-height: 50vh;
   overflow-y: auto;
-  padding: 0 0.25rem;
+  padding: 0 0.5rem;
   text-align: left;
 }

src/components/common/StickerSetCard.tsx

@@ -4,7 +4,7 @@ import React, { memo, useCallback } from '../../lib/teact/teact';
 import type { ApiSticker, ApiStickerSet } from '../../api/types';
 import type { ObserveFn } from '../../hooks/useIntersectionObserver';
 
-import { STICKER_SIZE_GENERAL_SETTINGS } from '../../config';
+import { CHAT_HEIGHT_PX, STICKER_SIZE_GENERAL_SETTINGS } from '../../config';
 import buildClassName from '../../util/buildClassName';
 
 import useLang from '../../hooks/useLang';
@@ -79,7 +79,8 @@ const StickerSetCard: FC<OwnProps> = ({
   return (
     <ListItem
       narrow
-      className={buildClassName('StickerSetCard', className)}
+      className={buildClassName('StickerSetCard', 'chat-item-clickable small-icon', className)}
+      style={`height: ${CHAT_HEIGHT_PX}px;`}
       inactive={!firstSticker}
       onClick={handleCardClick}
     >

src/components/middle/composer/StickerSetCover.module.scss

@@ -1,5 +1,5 @@
 .root {
-  --custom-emoji-size: 3rem;
+  --custom-emoji-size: 2rem;
 
   width: 1.875rem;
   height: 1.875rem;