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/chat/ChatContainer/ChatContainer.tsx

@@ -29,6 +29,7 @@ export type ChatContainerProps = {
   showInput?: boolean;
   height?: string;
   chatAvailable: boolean;
+  focusInput?: boolean;
 };
 
 function shouldCollapseMessages(
@@ -93,6 +94,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
   showInput,
   height,
   chatAvailable: chatEnabled,
+  focusInput = true,
 }) => {
   const [showScrollToBottomButton, setShowScrollToBottomButton] = useState(false);
   const [isAtBottom, setIsAtBottom] = useState(false);
@@ -282,7 +284,7 @@ export const ChatContainer: FC<ChatContainerProps> = ({
         {MessagesTable}
         {showInput && (
           <div className={styles.chatTextField}>
-            <ChatTextField enabled={chatEnabled} />
+            <ChatTextField enabled={chatEnabled} focusInput={focusInput} />
           </div>
         )}
       </div>

web/components/chat/ChatTextField/ChatTextField.tsx

@@ -131,11 +131,12 @@ const getCharacterCount = node => {
 export type ChatTextFieldProps = {
   defaultText?: string;
   enabled: boolean;
+  focusInput: boolean;
 };
 
 const characterLimit = 300;
 
-export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText, enabled }) => {
+export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText, enabled, focusInput }) => {
   const [showEmojis, setShowEmojis] = useState(false);
   const [characterCount, setCharacterCount] = useState(defaultText?.length);
   const websocketService = useRecoilValue<WebsocketService>(websocketServiceAtom);
@@ -240,7 +241,7 @@ export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText, enabled })
   };
 
   return (
-    <div className={styles.root}>
+    <div id="chat-input" className={styles.root}>
       <div
         className={classNames(
           styles.inputWrap,
@@ -269,7 +270,7 @@ export const ChatTextField: FC<ChatTextFieldProps> = ({ defaultText, enabled })
             style={{ width: '100%' }}
             role="textbox"
             aria-label="Chat text input"
-            autoFocus
+            autoFocus={focusInput}
           />
           <Popover
             content={