From 1feb0fa129a992330cb4e644316932ff38d627c4 Mon Sep 17 00:00:00 2001
From: Vlad Piersec <vlad.piersec@8x8.com>
Date: Mon, 18 Oct 2021 14:32:28 +0300
Subject: [PATCH] fix(polls): Fix scroll not working on mobile web polls pane

* Moved TouchmoveHack's css to component
---
 css/_chat.scss                                |  5 ----
 css/_polls.scss                               |  2 +-
 react/features/chat/components/web/Chat.js    |  6 +++--
 .../chat/components/web/TouchmoveHack.js      | 27 ++++++++++++++++---
 .../settings/components/web/MoreTab.js        |  8 ++++--
 5 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/css/_chat.scss b/css/_chat.scss
index 20c548661..233f54ff4 100644
--- a/css/_chat.scss
+++ b/css/_chat.scss
@@ -563,11 +563,6 @@
     }
 }
 
-.touchmove-hack {
-    display: flex;
-    flex: 1;
-    overflow: auto;
-}
 
 /**
  * Make header close button more easily tappable on mobile.
diff --git a/css/_polls.scss b/css/_polls.scss
index da9791eea..b6e444d0f 100644
--- a/css/_polls.scss
+++ b/css/_polls.scss
@@ -240,7 +240,7 @@ ol.poll-result-list {
     position: relative;
 
     @media (max-width: 580px) {
-        height: calc(100% - 32px);
+        height: 100%;
     }
 }
 
diff --git a/react/features/chat/components/web/Chat.js b/react/features/chat/components/web/Chat.js
index a4d4af2c6..9ea4f00d2 100644
--- a/react/features/chat/components/web/Chat.js
+++ b/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 } />
diff --git a/react/features/chat/components/web/TouchmoveHack.js b/react/features/chat/components/web/TouchmoveHack.js
index 3ec5fb80e..9363f5846 100644
--- a/react/features/chat/components/web/TouchmoveHack.js
+++ b/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>
diff --git a/react/features/settings/components/web/MoreTab.js b/react/features/settings/components/web/MoreTab.js
index efd4914d8..3f037285e 100644
--- a/react/features/settings/components/web/MoreTab.js
+++ b/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 }