Emoji Picker: Align last line to the grid (#2567)

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

src/components/middle/composer/EmojiPicker.scss

@@ -1,4 +1,6 @@
 .EmojiPicker {
+  --emoji-size: 2.5rem;
+
   height: 100%;
 
   &-main {

src/components/middle/composer/StickerPicker.scss

@@ -107,3 +107,7 @@
     justify-content: center;
   }
 }
+
+.CustomEmojiPicker {
+  --emoji-size: 2.5rem;
+}

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

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