Fix FAB overlapping last entries (#3448)

src/components/common/CustomEmojiPicker.tsx

@@ -54,6 +54,7 @@ import styles from './CustomEmojiPicker.module.scss';
 type OwnProps = {
   chatId?: string;
   className?: string;
+  pickerListClassName?: string;
   isHidden?: boolean;
   loadAndPlay: boolean;
   idPrefix?: string;
@@ -102,6 +103,7 @@ const STICKER_SET_IDS_WITH_COVER = new Set([
 
 const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
   className,
+  pickerListClassName,
   isHidden,
   loadAndPlay,
   addedCustomEmojiIds,
@@ -370,6 +372,7 @@ const CustomEmojiPicker: FC<OwnProps & StateProps> = ({
     pickerStyles.main_customEmoji,
     'no-selection',
     IS_TOUCH_ENV ? 'no-scrollbar' : 'custom-scroll',
+    pickerListClassName,
   );
 
   return (

src/components/left/settings/folders/SettingsFoldersChatsPicker.tsx

@@ -209,7 +209,7 @@ const SettingsFoldersChatsPicker: FC<OwnProps & StateProps> = ({
         />
       </div>
       <InfiniteScroll
-        className="picker-list custom-scroll"
+        className="picker-list custom-scroll fab-padding-bottom"
         itemSelector=".chat-item"
         items={viewportIds}
         onLoadMore={getMore}

src/components/right/CreateTopic.tsx

@@ -146,6 +146,7 @@ const CreateTopic: FC<OwnProps & StateProps> = ({
             loadAndPlay={isActive}
             onCustomEmojiSelect={handleCustomEmojiSelect}
             className={styles.iconPicker}
+            pickerListClassName="fab-padding-bottom"
             withDefaultTopicIcons
           />
         </div>

src/components/right/EditTopic.tsx

@@ -157,6 +157,7 @@ const EditTopic: FC<OwnProps & StateProps> = ({
                   loadAndPlay={isActive}
                   onCustomEmojiSelect={handleCustomEmojiSelect}
                   className={styles.iconPicker}
+                  pickerListClassName="fab-padding-bottom"
                   withDefaultTopicIcons
                 />
               </div>

src/styles/_common.scss

@@ -207,3 +207,7 @@
     --color-user: var(--color-deleted-account);
   }
 }
+
+.fab-padding-bottom {
+  padding-bottom: 5rem !important;
+}