From 47a6cf312cb98ca24446f655550cfe8f2f3213ba Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Thu, 10 Nov 2022 18:27:54 +0400
Subject: [PATCH] Symbol Menu: Fix opening on several touch screens (#2110)

---
 src/components/middle/composer/SymbolMenu.scss | 2 ++
 src/components/ui/ResponsiveHoverButton.tsx    | 7 ++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/middle/composer/SymbolMenu.scss b/src/components/middle/composer/SymbolMenu.scss
index 1aebaa305..d8d22efe5 100644
--- a/src/components/middle/composer/SymbolMenu.scss
+++ b/src/components/middle/composer/SymbolMenu.scss
@@ -126,6 +126,8 @@
   }
 
   .bubble {
+    --offset-y: 4rem;
+
     width: calc(var(--symbol-menu-width) + 0.25rem); // Reserve width for scrollbar
     padding: 0;
     overflow: hidden;
diff --git a/src/components/ui/ResponsiveHoverButton.tsx b/src/components/ui/ResponsiveHoverButton.tsx
index c3561f09b..1c954a092 100644
--- a/src/components/ui/ResponsiveHoverButton.tsx
+++ b/src/components/ui/ResponsiveHoverButton.tsx
@@ -46,13 +46,18 @@ const ResponsiveHoverButton: FC<OwnProps> = ({ onActivate, ...buttonProps }) =>
     isMouseInside.current = false;
   }, []);
 
+  const handleClick = useCallback(() => {
+    isMouseInside.current = true;
+    onActivate();
+  }, [onActivate]);
+
   return (
     <Button
       // eslint-disable-next-line react/jsx-props-no-spreading
       {...buttonProps}
       onMouseEnter={!IS_TOUCH_ENV ? handleMouseEnter : undefined}
       onMouseLeave={!IS_TOUCH_ENV ? handleMouseLeave : undefined}
-      onClick={onActivate}
+      onClick={!IS_TOUCH_ENV ? onActivate : handleClick}
     />
   );
 };