From 88c0aced2b710a74db303cd150eb9b5472a61f66 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Mon, 7 Nov 2022 23:00:32 +0400
Subject: [PATCH] Composer: Adjust layouts in tooltips (#2107)

---
 src/components/common/StickerButton.scss             |  6 ++++--
 src/components/middle/composer/Composer.tsx          | 12 ++++++------
 .../middle/composer/CustomEmojiTooltip.module.scss   | 11 +++++++++--
 .../middle/composer/CustomEmojiTooltip.tsx           |  4 ++--
 src/components/middle/composer/EmojiTooltip.scss     |  3 ++-
 src/config.ts                                        |  1 +
 6 files changed, 24 insertions(+), 13 deletions(-)

diff --git a/src/components/common/StickerButton.scss b/src/components/common/StickerButton.scss
index 213d872a4..2f2151cd1 100644
--- a/src/components/common/StickerButton.scss
+++ b/src/components/common/StickerButton.scss
@@ -1,4 +1,6 @@
 .StickerButton {
+  --custom-emoji-size: 2.5rem;
+
   display: inline-block;
   width: 4rem;
   height: 4rem;
@@ -11,8 +13,8 @@
   --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
 
   &.custom-emoji {
-    width: 2.5rem;
-    height: 2.5rem;
+    width: var(--custom-emoji-size);
+    height: var(--custom-emoji-size);
     margin: 0.3125rem;
   }
 
diff --git a/src/components/middle/composer/Composer.tsx b/src/components/middle/composer/Composer.tsx
index 51a00f465..a3b6689b6 100644
--- a/src/components/middle/composer/Composer.tsx
+++ b/src/components/middle/composer/Composer.tsx
@@ -1295,18 +1295,18 @@ const Composer: FC<OwnProps & StateProps> = ({
               onClose={closeBotCommandMenu}
             />
           )}
-          <StickerTooltip
-            chatId={chatId}
-            threadId={threadId}
-            isOpen={isStickerTooltipOpen}
-            onStickerSelect={handleStickerSelect}
-          />
           <CustomEmojiTooltip
             chatId={chatId}
             isOpen={isCustomEmojiTooltipOpen}
             onCustomEmojiSelect={insertCustomEmoji}
             addRecentCustomEmoji={addRecentCustomEmoji}
           />
+          <StickerTooltip
+            chatId={chatId}
+            threadId={threadId}
+            isOpen={isStickerTooltipOpen}
+            onStickerSelect={handleStickerSelect}
+          />
           <EmojiTooltip
             isOpen={isEmojiTooltipOpen}
             emojis={filteredEmojis}
diff --git a/src/components/middle/composer/CustomEmojiTooltip.module.scss b/src/components/middle/composer/CustomEmojiTooltip.module.scss
index 34fbafe64..06b55e577 100644
--- a/src/components/middle/composer/CustomEmojiTooltip.module.scss
+++ b/src/components/middle/composer/CustomEmojiTooltip.module.scss
@@ -1,14 +1,21 @@
 .root:global(.composer-tooltip) {
   display: flex;
-  padding-left: 0.25rem;
+  padding: 0;
+  z-index: 1;
 
+  overflow-y: hidden;
   overflow-x: auto;
   @supports (overflow-x: overlay) {
     overflow-x: overlay;
   }
-  overflow-y: hidden;
 
   .emojiButton {
     flex: 0 0 2.5rem;
+    --custom-emoji-size: 2rem;
+    margin: 0.5rem 0 0.5rem 0.25rem;
+  }
+
+  &:global(.shown + .StickerTooltip) {
+    transform: translateY(-1.75rem);
   }
 }
diff --git a/src/components/middle/composer/CustomEmojiTooltip.tsx b/src/components/middle/composer/CustomEmojiTooltip.tsx
index c9d501687..e01d3822e 100644
--- a/src/components/middle/composer/CustomEmojiTooltip.tsx
+++ b/src/components/middle/composer/CustomEmojiTooltip.tsx
@@ -7,7 +7,7 @@ import type { FC } from '../../../lib/teact/teact';
 import type { ApiSticker } from '../../../api/types';
 import type { GlobalActions } from '../../../global/types';
 
-import { EMOJI_SIZE_PICKER } from '../../../config';
+import { COMPOSER_EMOJI_SIZE_PICKER } from '../../../config';
 import { selectIsChatWithSelf, selectIsCurrentUserPremium } from '../../../global/selectors';
 import buildClassName from '../../../util/buildClassName';
 import captureEscKeyListener from '../../../util/captureEscKeyListener';
@@ -90,7 +90,7 @@ const CustomEmojiTooltip: FC<OwnProps & StateProps> = ({
             key={sticker.id}
             sticker={sticker}
             className={styles.emojiButton}
-            size={EMOJI_SIZE_PICKER}
+            size={COMPOSER_EMOJI_SIZE_PICKER}
             observeIntersection={observeIntersection}
             onClick={handleCustomEmojiSelect}
             clickArg={sticker}
diff --git a/src/components/middle/composer/EmojiTooltip.scss b/src/components/middle/composer/EmojiTooltip.scss
index d5cd79259..aae0d789a 100644
--- a/src/components/middle/composer/EmojiTooltip.scss
+++ b/src/components/middle/composer/EmojiTooltip.scss
@@ -1,6 +1,6 @@
 .EmojiTooltip {
   display: flex;
-  padding-left: 0.25rem;
+  padding: 0;
 
   overflow-x: auto;
   @supports (overflow-x: overlay) {
@@ -10,5 +10,6 @@
 
   .EmojiButton {
     flex: 0 0 2.5rem;
+    margin-right: 0;
   }
 }
diff --git a/src/config.ts b/src/config.ts
index af4adbb97..9a2ea74c1 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -139,6 +139,7 @@ export const STICKER_SIZE_AUTH = 160;
 export const STICKER_SIZE_AUTH_MOBILE = 120;
 export const STICKER_SIZE_PICKER = 64;
 export const EMOJI_SIZE_PICKER = 40;
+export const COMPOSER_EMOJI_SIZE_PICKER = 32;
 export const STICKER_SIZE_GENERAL_SETTINGS = 48;
 export const STICKER_SIZE_PICKER_HEADER = 32;
 export const STICKER_SIZE_SEARCH = 64;