Refactor mobile chat into modal (#3038)

* feat(mobile): refactor mobile chat into modal

- Make page always scrollable
- Move mobile chat into a standalone modal

* fix(test): split out mobile browser test specs

* fix(mobile): force chat button to render on top of footer

* fix: some small updates from review

* fix: hide/show hide chat menu option based on width

* fix: chat button icon getting cut off

* chore(tests): add browser tests for mobile chat modal

* chore(tests): add story for ChatModal component

* fix(test): quiet shellcheck

* fix: remove unused import

* fix(tests): silence storybook linting warning

* fix(ui): reposition chat modal button icon with transform

web/components/common/UserDropdown/UserDropdown.tsx

@@ -1,4 +1,5 @@
 import { Menu, Dropdown, Button } from 'antd';
+import classnames from 'classnames';
 
 import { useRecoilState, useRecoilValue } from 'recoil';
 import { FC, useState } from 'react';
@@ -55,16 +56,29 @@ const AuthModal = dynamic(
 );
 
 export type UserDropdownProps = {
+  id: string;
   username?: string;
+  hideTitleOnMobile?: boolean;
+  showToggleChatOption?: boolean;
 };
 
-export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername = undefined }) => {
+export const UserDropdown: FC<UserDropdownProps> = ({
+  id,
+  username: defaultUsername = undefined,
+  hideTitleOnMobile = false,
+  showToggleChatOption: showHideChatOption = true,
+}) => {
   const [showNameChangeModal, setShowNameChangeModal] = useState<boolean>(false);
   const [showAuthModal, setShowAuthModal] = useState<boolean>(false);
   const [chatToggleVisible, setChatToggleVisible] = useRecoilState(chatVisibleToggleAtom);
   const appState = useRecoilValue<AppStateOptions>(appStateAtom);
 
   const toggleChatVisibility = () => {
+    // If we don't support the hide chat option then don't do anything.
+    if (!showHideChatOption) {
+      return;
+    }
+
     setChatToggleVisible(!chatToggleVisible);
   };
 
@@ -97,12 +111,13 @@ export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername
       <Menu.Item key="1" icon={<LockOutlined />} onClick={() => setShowAuthModal(true)}>
         Authenticate
       </Menu.Item>
-      {appState.chatAvailable && (
+      {showHideChatOption && appState.chatAvailable && (
         <Menu.Item
           key="3"
           icon={<MessageOutlined />}
           onClick={() => toggleChatVisibility()}
           aria-expanded={chatToggleVisible}
+          className={styles.chatToggle}
         >
           {chatToggleVisible ? 'Hide Chat' : 'Show Chat'}
         </Menu.Item>
@@ -121,10 +136,17 @@ export const UserDropdown: FC<UserDropdownProps> = ({ username: defaultUsername
         />
       )}
     >
-      <div id="user-menu" className={styles.root}>
+      <div id={id} className={styles.root}>
         <Dropdown overlay={menu} trigger={['click']}>
           <Button type="primary" icon={<UserOutlined className={styles.userIcon} />}>
-            <span className={styles.username}>{username}</span>
+            <span
+              className={classnames([
+                styles.username,
+                hideTitleOnMobile && styles.hideTitleOnMobile,
+              ])}
+            >
+              {username}
+            </span>
             <CaretDownOutlined />
           </Button>
         </Dropdown>