feat(toolbox): adapt toolbox and hang up menu visibility to mobile web

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

@@ -44,15 +44,6 @@ interface IProps {
 
 const useStyles = makeStyles()(() => {
     return {
-        contextMenu: {
-            position: 'relative',
-            right: 'auto',
-            margin: 0,
-            marginBottom: '8px',
-            maxHeight: 'calc(100dvh - 100px)',
-            minWidth: '240px'
-        },
-
         hangupMenu: {
             position: 'relative',
             right: 'auto',
@@ -111,6 +102,7 @@ export default function Toolbox({
     const mainToolbarButtonsThresholds
         = useSelector((state: IReduxState) => state['features/toolbox'].mainToolbarButtonsThresholds);
     const allButtons = useToolboxButtons(customToolbarButtons);
+    const isMobile = isMobileBrowser();
 
     useKeyboardShortcuts(toolbarButtonsToUse);
 
@@ -150,9 +142,16 @@ export default function Toolbox({
     }, [ dispatch ]);
 
     useEffect(() => {
-        if (hangupMenuVisible && !toolbarVisible) {
-            onSetHangupVisible(false);
-            dispatch(setToolbarHovered(false));
+
+        // On mobile web we want to keep both toolbox and hang up menu visible
+        // because they depend on each other.
+        if (isMobile) {
+            hangupMenuVisible && dispatch(setToolboxVisible(true));
+        } else {
+            if (hangupMenuVisible && !toolbarVisible) {
+                onSetHangupVisible(false)
+                dispatch(setToolbarHovered(false));
+            }
         }
     }, [ dispatch, hangupMenuVisible, toolbarVisible, onSetHangupVisible ]);
 
@@ -220,7 +219,6 @@ export default function Toolbox({
     }
 
     const endConferenceSupported = Boolean(conference?.isEndConferenceSupported() && isModerator);
-    const isMobile = isMobileBrowser();
 
     const rootClassNames = `new-toolbox ${toolbarVisible ? 'visible' : ''} ${
         toolbarButtonsToUse.length ? '' : 'no-buttons'} ${chatOpen ? 'shift-right' : ''}`;