From 251aa22151647adb5e10c49675c80a481dea6fe2 Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Fri, 9 Jul 2021 20:01:44 +0300
Subject: [PATCH] Symbol Menu: Show scrollbar on non-touch devices

---
 src/components/middle/composer/EmojiPicker.tsx   | 7 +++++--
 src/components/middle/composer/GifPicker.tsx     | 6 +++++-
 src/components/middle/composer/StickerPicker.tsx | 6 +++++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/src/components/middle/composer/EmojiPicker.tsx b/src/components/middle/composer/EmojiPicker.tsx
index f716974a0..cc7d9000b 100644
--- a/src/components/middle/composer/EmojiPicker.tsx
+++ b/src/components/middle/composer/EmojiPicker.tsx
@@ -6,8 +6,8 @@ import { withGlobal } from '../../../lib/teact/teactn';
 import { GlobalState } from '../../../global/types';
 
 import { MENU_TRANSITION_DURATION } from '../../../config';
+import { IS_SINGLE_COLUMN_LAYOUT, IS_TOUCH_ENV } from '../../../util/environment';
 import { MEMO_EMPTY_ARRAY } from '../../../util/memo';
-import { IS_SINGLE_COLUMN_LAYOUT } from '../../../util/environment';
 import {
   EmojiModule,
   EmojiRawData,
@@ -197,7 +197,10 @@ const EmojiPicker: FC<OwnProps & StateProps> = ({
       <div ref={headerRef} className="EmojiPicker-header" dir={lang.isRtl ? 'rtl' : ''}>
         {allCategories.map(renderCategoryButton)}
       </div>
-      <div ref={containerRef} className="EmojiPicker-main no-selection no-scrollbar">
+      <div
+        ref={containerRef}
+        className={buildClassName('EmojiPicker-main no-selection', IS_TOUCH_ENV ? 'no-scrollbar' : 'custom-scroll')}
+      >
         {allCategories.map((category, i) => (
           <EmojiCategory
             category={category}
diff --git a/src/components/middle/composer/GifPicker.tsx b/src/components/middle/composer/GifPicker.tsx
index c74ac1bf2..77fd3fa87 100644
--- a/src/components/middle/composer/GifPicker.tsx
+++ b/src/components/middle/composer/GifPicker.tsx
@@ -7,6 +7,7 @@ import { GlobalActions } from '../../../global/types';
 import { ApiVideo } from '../../../api/types';
 
 import { SLIDE_TRANSITION_DURATION } from '../../../config';
+import { IS_TOUCH_ENV } from '../../../util/environment';
 import buildClassName from '../../../util/buildClassName';
 import { pick } from '../../../util/iteratees';
 import { useIntersectionObserver } from '../../../hooks/useIntersectionObserver';
@@ -56,7 +57,10 @@ const GifPicker: FC<OwnProps & StateProps & DispatchProps> = ({
   const canRenderContents = useAsyncRendering([], SLIDE_TRANSITION_DURATION);
 
   return (
-    <div ref={containerRef} className={buildClassName('GifPicker no-scrollbar', className)}>
+    <div
+      ref={containerRef}
+      className={buildClassName('GifPicker', className, IS_TOUCH_ENV ? 'no-scrollbar' : 'custom-scroll')}
+    >
       {!canSendGifs ? (
         <div className="picker-disabled">Sending GIFs is not allowed in this chat.</div>
       ) : canRenderContents && savedGifs && savedGifs.length ? (
diff --git a/src/components/middle/composer/StickerPicker.tsx b/src/components/middle/composer/StickerPicker.tsx
index 1a22f31d0..a930ac16c 100644
--- a/src/components/middle/composer/StickerPicker.tsx
+++ b/src/components/middle/composer/StickerPicker.tsx
@@ -8,6 +8,7 @@ import { ApiStickerSet, ApiSticker } from '../../../api/types';
 import { StickerSetOrRecent } from '../../../types';
 
 import { SLIDE_TRANSITION_DURATION, STICKER_SIZE_PICKER_HEADER } from '../../../config';
+import { IS_TOUCH_ENV } from '../../../util/environment';
 import { MEMO_EMPTY_ARRAY } from '../../../util/memo';
 import fastSmoothScroll from '../../../util/fastSmoothScroll';
 import buildClassName from '../../../util/buildClassName';
@@ -257,7 +258,10 @@ const StickerPicker: FC<OwnProps & StateProps & DispatchProps> = ({
       >
         {allSets.map(renderCover)}
       </div>
-      <div ref={containerRef} className="StickerPicker-main no-scrollbar">
+      <div
+        ref={containerRef}
+        className={buildClassName('StickerPicker-main no-selection', IS_TOUCH_ENV ? 'no-scrollbar' : 'custom-scroll')}
+      >
         {allSets.map((stickerSet, i) => (
           <StickerSet
             key={stickerSet.id}