From d228deb66c062705086c3f99e5140bf866ad6de2 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 17 Feb 2023 02:31:38 +0100
Subject: [PATCH] Emoji Picker: Align last line to the grid (#2567)

---
 src/components/common/StickerButton.scss        |  2 +-
 src/components/middle/composer/EmojiPicker.scss |  2 ++
 .../middle/composer/StickerPicker.scss          |  4 ++++
 src/components/middle/composer/StickerSet.tsx   |  5 ++---
 src/components/middle/composer/SymbolMenu.scss  | 17 +++++++++++------
 5 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/common/StickerButton.scss b/src/components/common/StickerButton.scss
index bfd1f7c5c..61d2df35c 100644
--- a/src/components/common/StickerButton.scss
+++ b/src/components/common/StickerButton.scss
@@ -1,5 +1,6 @@
 .StickerButton {
   --custom-emoji-size: 2.5rem;
+  --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
 
   display: inline-block;
   width: 4rem;
@@ -10,7 +11,6 @@
   background-size: contain;
   transition: background-color 0.15s ease, opacity 0.3s ease !important;
   position: relative;
-  --premium-gradient: linear-gradient(88.39deg, #6C93FF -2.56%, #976FFF 51.27%, #DF69D1 107.39%);
 
   &.custom-emoji {
     width: var(--custom-emoji-size);
diff --git a/src/components/middle/composer/EmojiPicker.scss b/src/components/middle/composer/EmojiPicker.scss
index 067cf3bf0..274ae2d28 100644
--- a/src/components/middle/composer/EmojiPicker.scss
+++ b/src/components/middle/composer/EmojiPicker.scss
@@ -1,4 +1,6 @@
 .EmojiPicker {
+  --emoji-size: 2.5rem;
+
   height: 100%;
 
   &-main {
diff --git a/src/components/middle/composer/StickerPicker.scss b/src/components/middle/composer/StickerPicker.scss
index 7edfbea00..9482d1384 100644
--- a/src/components/middle/composer/StickerPicker.scss
+++ b/src/components/middle/composer/StickerPicker.scss
@@ -107,3 +107,7 @@
     justify-content: center;
   }
 }
+
+.CustomEmojiPicker {
+  --emoji-size: 2.5rem;
+}
diff --git a/src/components/middle/composer/StickerSet.tsx b/src/components/middle/composer/StickerSet.tsx
index 5f0f513b1..c3ad07efd 100644
--- a/src/components/middle/composer/StickerSet.tsx
+++ b/src/components/middle/composer/StickerSet.tsx
@@ -104,7 +104,6 @@ const StickerSet: FC<OwnProps> = ({
 
   const stickerMarginPx = isMobile ? 8 : 16;
   const emojiMarginPx = isMobile ? 8 : 10;
-  const containerPaddingPx = isMobile && !isStatusPicker ? 8 : 0;
   const isRecent = stickerSet.id === RECENT_SYMBOL_SET_ID;
   const isFavorite = stickerSet.id === FAVORITE_SYMBOL_SET_ID;
   const isEmoji = stickerSet.isEmoji;
@@ -159,8 +158,8 @@ const StickerSet: FC<OwnProps> = ({
   const calculateItemsPerRow = useCallback((width: number) => {
     if (!width) return ITEMS_PER_ROW_FALLBACK;
 
-    return Math.floor((width - containerPaddingPx) / (itemSize + margin));
-  }, [containerPaddingPx, itemSize, margin]);
+    return Math.floor(width / (itemSize + margin));
+  }, [itemSize, margin]);
 
   const handleResize = useCallback((entry: ResizeObserverEntry) => {
     setItemsPerRow(calculateItemsPerRow(entry.contentRect.width));
diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss
index 1c5a68f62..10434b357 100644
--- a/src/components/middle/composer/SymbolMenu.scss
+++ b/src/components/middle/composer/SymbolMenu.scss
@@ -255,14 +255,14 @@
   }
 
   .symbol-set-container {
-    display: flex;
+    display: grid;
     justify-content: space-between;
-    flex-wrap: wrap;
+    grid-template-columns: repeat(auto-fill, var(--emoji-size, 4rem));
+    grid-gap: 0.625rem;
+    padding: 0.3125rem;
 
-    // Fix for the last row alignment
-    &::after {
-      content: "";
-      flex: auto;
+    @media (max-width: 600px) {
+      grid-gap: 0.5rem;
     }
 
     &:not(.shown) {
@@ -272,5 +272,10 @@
     &.closing {
       transition: none;
     }
+
+    > .EmojiButton,
+    > .StickerButton {
+      margin: 0;
+    }
   }
 }