Dropdown triangles a bit nicer, smoother scrolling on touch (#5062)

app/javascript/mastodon/components/dropdown_menu.js

@@ -4,6 +4,9 @@ import ImmutablePropTypes from 'react-immutable-proptypes';
 import IconButton from './icon_button';
 import { Overlay } from 'react-overlays';
 import { Motion, spring } from 'react-motion';
+import detectPassiveEvents from 'detect-passive-events';
+
+const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
 
 class DropdownMenu extends React.PureComponent {
 
@@ -33,12 +36,12 @@ class DropdownMenu extends React.PureComponent {
 
   componentDidMount () {
     document.addEventListener('click', this.handleDocumentClick, false);
-    document.addEventListener('touchend', this.handleDocumentClick, false);
+    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
   }
 
   componentWillUnmount () {
     document.removeEventListener('click', this.handleDocumentClick, false);
-    document.removeEventListener('touchend', this.handleDocumentClick, false);
+    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
   }
 
   setRef = c => {

app/javascript/mastodon/features/compose/components/emoji_picker_dropdown.js

@@ -5,6 +5,7 @@ import { Picker, Emoji } from 'emoji-mart';
 import { Overlay } from 'react-overlays';
 import classNames from 'classnames';
 import ImmutablePropTypes from 'react-immutable-proptypes';
+import detectPassiveEvents from 'detect-passive-events';
 
 const messages = defineMessages({
   emoji: { id: 'emoji_button.label', defaultMessage: 'Insert emoji' },
@@ -24,8 +25,8 @@ const messages = defineMessages({
 });
 
 const assetHost = process.env.CDN_HOST || '';
-
 const backgroundImageFn = () => `${assetHost}/emoji/sheet.png`;
+const listenerOptions = detectPassiveEvents.hasSupport ? { passive: true } : false;
 
 class ModifierPickerMenu extends React.PureComponent {
 
@@ -60,12 +61,12 @@ class ModifierPickerMenu extends React.PureComponent {
 
   attachListeners () {
     document.addEventListener('click', this.handleDocumentClick, false);
-    document.addEventListener('touchend', this.handleDocumentClick, false);
+    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
   }
 
   removeListeners () {
     document.removeEventListener('click', this.handleDocumentClick, false);
-    document.removeEventListener('touchend', this.handleDocumentClick, false);
+    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
   }
 
   setRef = c => {
@@ -157,12 +158,12 @@ class EmojiPickerMenu extends React.PureComponent {
 
   componentDidMount () {
     document.addEventListener('click', this.handleDocumentClick, false);
-    document.addEventListener('touchend', this.handleDocumentClick, false);
+    document.addEventListener('touchend', this.handleDocumentClick, listenerOptions);
   }
 
   componentWillUnmount () {
     document.removeEventListener('click', this.handleDocumentClick, false);
-    document.removeEventListener('touchend', this.handleDocumentClick, false);
+    document.removeEventListener('touchend', this.handleDocumentClick, listenerOptions);
   }
 
   setRef = c => {

app/javascript/styles/components.scss

@@ -1265,14 +1265,14 @@
   &.top {
     bottom: -5px;
     margin-left: -13px;
-    border-width: 5px 5px 0;
+    border-width: 5px 7px 0;
     border-top-color: $ui-secondary-color;
   }
 
   &.bottom {
     top: -5px;
     margin-left: -13px;
-    border-width: 0 5px 5px;
+    border-width: 0 7px 5px;
     border-bottom-color: $ui-secondary-color;
   }
 

app/javascript/styles/emoji_picker.scss

@@ -91,8 +91,10 @@
 .emoji-mart-scroll {
   overflow-y: scroll;
   height: 270px;
+  max-height: 35vh;
   padding: 0 6px 6px;
   background: $simple-background-color;
+  will-change: transform;
 }
 
 .emoji-mart-search {