fix(polls): Fix scroll not working on mobile web polls pane

* Moved TouchmoveHack's css to component

css/_chat.scss

@@ -563,11 +563,6 @@
     }
 }
 
-.touchmove-hack {
-    display: flex;
-    flex: 1;
-    overflow: auto;
-}
 
 /**
  * Make header close button more easily tappable on mobile.

css/_polls.scss

@@ -240,7 +240,7 @@ ol.poll-result-list {
     position: relative;
 
     @media (max-width: 580px) {
-        height: calc(100% - 32px);
+        height: 100%;
     }
 }
 

react/features/chat/components/web/Chat.js

@@ -134,7 +134,7 @@ class Chat extends AbstractChat<Props> {
             return (
                 <>
                     { this.props._isPollsEnabled && this._renderTabs()}
-                    <PollsPane />
+                    <TouchmoveHack isModal = { true }><PollsPane /></TouchmoveHack>
                     <KeyboardAvoider />
                 </>
             );
@@ -143,7 +143,9 @@ class Chat extends AbstractChat<Props> {
         return (
             <>
                 {this.props._isPollsEnabled && this._renderTabs()}
-                <TouchmoveHack isModal = { this.props._isModal }>
+                <TouchmoveHack
+                    flex = { true }
+                    isModal = { this.props._isModal }>
                     <MessageContainer
                         messages = { this.props._messages }
                         ref = { this._messageContainerRef } />

react/features/chat/components/web/TouchmoveHack.js

@@ -1,5 +1,7 @@
 // @flow
 
+import { makeStyles } from '@material-ui/core/styles';
+import clsx from 'clsx';
 import React, { useEffect, useRef } from 'react';
 
 import { isMobileBrowser } from '../../../base/environment/utils';
@@ -11,19 +13,37 @@ type Props = {
      */
    children: React$Node,
 
+    /**
+     * Whether the component should be flex container or not.
+     */
+    flex?: boolean,
+
     /**
      * Whether the component is rendered within a modal.
      */
-    isModal: boolean
+    isModal: boolean,
+
 };
 
+const useStyles = makeStyles(() => {
+    return {
+        flex: {
+            display: 'flex',
+            flex: 1
+        },
+        base: {
+            height: '100%',
+            overflow: 'auto'
+        }
+    };
+});
 
 /**
  * Component that disables {@code touchmove} propagation below it.
  *
  * @returns {ReactElement}
  */
-function TouchmoveHack({ children, isModal }: Props) {
+function TouchmoveHack({ children, isModal, flex }: Props) {
     if (!isModal || !isMobileBrowser()) {
         return children;
     }
@@ -54,10 +74,11 @@ function TouchmoveHack({ children, isModal }: Props) {
             }
         };
     }, []);
+    const classes = useStyles();
 
     return (
         <div
-            className = 'touchmove-hack'
+            className = { clsx(classes.base, flex && classes.flex) }
             ref = { touchMoveElementRef }>
             {children}
         </div>

react/features/settings/components/web/MoreTab.js

@@ -301,7 +301,9 @@ class MoreTab extends AbstractDialogTab<Props, State> {
                     { t('settings.desktopShareFramerate') }
                 </h2>
                 <div className = 'dropdown-menu'>
-                    <TouchmoveHack isModal = { true }>
+                    <TouchmoveHack
+                        flex = { true }
+                        isModal = { true }>
                         <DropdownMenu
                             isOpen = { this.state.isFramerateSelectOpen }
                             onOpenChange = { this._onFramerateDropdownOpenChange }
@@ -384,7 +386,9 @@ class MoreTab extends AbstractDialogTab<Props, State> {
                     { t('settings.language') }
                 </h2>
                 <div className = 'dropdown-menu'>
-                    <TouchmoveHack isModal = { true }>
+                    <TouchmoveHack
+                        flex = { true }
+                        isModal = { true }>
                         <DropdownMenu
                             isOpen = { this.state.isLanguageSelectOpen }
                             onOpenChange = { this._onLanguageDropdownOpenChange }