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>