Symbol Menu: Fix opening on several touch screens (#2110)

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;

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