Composer: Adjust layouts in tooltips (#2107)

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;
+    width: var(--custom-emoji-size);
-    height: 2.5rem;
+    height: var(--custom-emoji-size);
     margin: 0.3125rem;
   }
 

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}

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

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}

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

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;