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

jitsi#15340)

On mobile web we want to keep both toolbox and hang up menu visible because they depend on each other.

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',
@@ -61,7 +52,7 @@ const useStyles = makeStyles()(() => {
             rowGap: '8px',
             margin: 0,
             padding: '16px',
-            marginBottom: '4px'
+            marginBottom: '8px'
         }
     };
 });
@@ -111,6 +102,8 @@ export default function Toolbox({
     const mainToolbarButtonsThresholds
         = useSelector((state: IReduxState) => state['features/toolbox'].mainToolbarButtonsThresholds);
     const allButtons = useToolboxButtons(customToolbarButtons);
+    const isMobile = isMobileBrowser();
+    const endConferenceSupported = Boolean(conference?.isEndConferenceSupported() && isModerator);
 
     useKeyboardShortcuts(toolbarButtonsToUse);
 
@@ -150,7 +143,12 @@ export default function Toolbox({
     }, [ dispatch ]);
 
     useEffect(() => {
-        if (hangupMenuVisible && !toolbarVisible) {
+
+        // On mobile web we want to keep both toolbox and hang up menu visible
+        // because they depend on each other.
+        if (endConferenceSupported && isMobile) {
+            hangupMenuVisible && dispatch(setToolboxVisible(true));
+        } else if (hangupMenuVisible && !toolbarVisible) {
             onSetHangupVisible(false);
             dispatch(setToolbarHovered(false));
         }
@@ -219,8 +217,6 @@ export default function Toolbox({
         return null;
     }
 
-    const endConferenceSupported = Boolean(conference?.isEndConferenceSupported() && isModerator);
-    const isMobile = isMobileBrowser();
 
     const rootClassNames = `new-toolbox ${toolbarVisible ? 'visible' : ''} ${
         toolbarButtonsToUse.length ? '' : 'no-buttons'} ${chatOpen ? 'shift-right' : ''}`;