fix(overflow-menu) Pin reactions on menu bottom on mobile web (#10599)

Move some styles from SCSS to JSS

css/_drawer.scss

@@ -24,10 +24,9 @@
 }
 
 .drawer-menu {
-    max-height: calc(80vh - 64px);
     background: #242528;
     border-radius: 16px 16px 0 0;
-    overflow-y: scroll;
+    overflow-y: auto;
     margin-bottom: env(safe-area-inset-bottom, 0);
     width: 100%;
 

css/_reactions-menu.scss

@@ -8,12 +8,6 @@
 	padding: 16px;
 
 	&.overflow {
-		width: auto;
-		padding-bottom: max(env(safe-area-inset-bottom, 0), 16px);
-		background-color: #141414;
-		box-shadow: none;
-		border-radius: 0;
-		position: relative;
 
 		.toolbox-icon {
 			width: 48px;

react/features/reactions/components/web/ReactionsMenu.js

@@ -2,6 +2,7 @@
 
 /* eslint-disable react/jsx-no-bind */
 
+import { withStyles } from '@material-ui/styles';
 import React, { Component } from 'react';
 import { bindActionCreators } from 'redux';
 
@@ -17,7 +18,7 @@ import { connect } from '../../../base/redux';
 import { dockToolbox } from '../../../toolbox/actions.web';
 import { addReactionToBuffer } from '../../actions.any';
 import { toggleReactionsMenuVisibility } from '../../actions.web';
-import { REACTIONS } from '../../constants';
+import { REACTIONS, REACTIONS_MENU_HEIGHT } from '../../constants';
 
 import ReactionButton from './ReactionButton';
 
@@ -43,6 +44,11 @@ type Props = {
      */
     _raisedHand: boolean,
 
+    /**
+     * An object containing the CSS classes.
+     */
+    classes: Object,
+
     /**
      * The Redux Dispatch function.
      */
@@ -61,6 +67,21 @@ type Props = {
 
 declare var APP: Object;
 
+const styles = theme => {
+    return {
+        overflow: {
+            width: 'auto',
+            paddingBottom: 'max(env(safe-area-inset-bottom, 0), 16px)',
+            backgroundColor: theme.palette.ui01,
+            boxShadow: 'none',
+            borderRadius: 0,
+            position: 'relative',
+            boxSizing: 'border-box',
+            height: `${REACTIONS_MENU_HEIGHT}px`
+        }
+    };
+};
+
 /**
  * Implements the reactions menu.
  *
@@ -172,10 +193,10 @@ class ReactionsMenu extends Component<Props> {
      * @inheritdoc
      */
     render() {
-        const { _raisedHand, t, overflowMenu, _isMobile } = this.props;
+        const { _raisedHand, t, overflowMenu, _isMobile, classes } = this.props;
 
         return (
-            <div className = { `reactions-menu ${overflowMenu ? 'overflow' : ''}` }>
+            <div className = { `reactions-menu ${overflowMenu ? `overflow ${classes.overflow}` : ''}` }>
                 <div className = 'reactions-row'>
                     { this._getReactionButtons() }
                 </div>
@@ -233,4 +254,4 @@ function mapDispatchToProps(dispatch) {
 export default translate(connect(
     mapStateToProps,
     mapDispatchToProps
-)(ReactionsMenu));
+)(withStyles(styles)(ReactionsMenu)));

react/features/reactions/constants.js

@@ -9,6 +9,11 @@ import {
     SILENCE_SOUND_FILES
 } from './sounds';
 
+/**
+ * Reactions menu height on mobile web (px).
+ */
+export const REACTIONS_MENU_HEIGHT = 144;
+
 /**
  * The payload name for the datachannel/endpoint reaction event.
  */

react/features/toolbox/components/web/Drawer.js

@@ -3,6 +3,8 @@
 import { makeStyles } from '@material-ui/core';
 import React, { useCallback } from 'react';
 
+import { DRAWER_MAX_HEIGHT } from '../../constants';
+
 
 type Props = {
 
@@ -25,7 +27,8 @@ type Props = {
 const useStyles = makeStyles(theme => {
     return {
         drawer: {
-            backgroundColor: theme.palette.ui02
+            backgroundColor: theme.palette.ui02,
+            maxHeight: `calc(${DRAWER_MAX_HEIGHT})`
         }
     };
 });

react/features/toolbox/components/web/Toolbox.js

@@ -42,7 +42,7 @@ import { ParticipantsPaneButton } from '../../../participants-pane/components/we
 import { getParticipantsPaneOpen } from '../../../participants-pane/functions';
 import { addReactionToBuffer } from '../../../reactions/actions.any';
 import { ReactionsMenuButton } from '../../../reactions/components';
-import { REACTIONS } from '../../../reactions/constants';
+import { REACTIONS, REACTIONS_MENU_HEIGHT } from '../../../reactions/constants';
 import { isReactionsEnabled } from '../../../reactions/functions.any';
 import {
     LiveStreamButton,
@@ -75,7 +75,7 @@ import {
     setToolbarHovered,
     showToolbox
 } from '../../actions';
-import { THRESHOLDS, NOT_APPLICABLE } from '../../constants';
+import { THRESHOLDS, NOT_APPLICABLE, DRAWER_MAX_HEIGHT } from '../../constants';
 import { isToolboxVisible } from '../../functions';
 import DownloadButton from '../DownloadButton';
 import HangupButton from '../HangupButton';
@@ -264,7 +264,9 @@ const styles = theme => {
             fontSize: 14,
             listStyleType: 'none',
             padding: '8px 0',
-            backgroundColor: theme.palette.ui03
+            backgroundColor: theme.palette.ui03,
+            overflowY: 'auto',
+            height: `calc(${DRAWER_MAX_HEIGHT} - ${REACTIONS_MENU_HEIGHT}px - 16px)`
         }
     };
 };

react/features/toolbox/constants.js

@@ -31,3 +31,5 @@ export const THRESHOLDS = [
 export const NOT_APPLICABLE = 'N/A';
 
 export const TOOLBAR_TIMEOUT = 4000;
+
+export const DRAWER_MAX_HEIGHT = '80vh - 64px';