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/ui/Content/Content.module.scss

@@ -13,20 +13,9 @@
   bottom: 0;
   width: 100%;
 
-	@include screen(tablet) {
-		top: 0;
+  @include screen(tablet) {
+    top: 0;
     position: relative;
-
-		&.online {
-			position: absolute;
-			top: calc(var(--player-container-height) + var(--status-bar-height) + var(--header-height));
-
-			// As we want content in the tabs to scroll within itself, force the tabs to display max height at all times.
-			// (We don't have to do this when not-online because we're having the entire layout scroll.
-			:global(.ant-tabs-content) {
-				 height: 100% !important;
-			}
-		}
   }
 
   :global(.ant-tabs-nav) {
@@ -53,16 +42,22 @@
   color: var(--theme-color-background-main);
 }
 
-.mobileActionButtonMenu {
+.mobileActionButtons {
   display: none;
 
   @include screen(tablet) {
-    display: block;
+    display: flex;
+    align-items: center;
     position: absolute;
     top: 4px;
     right: 10px;
     z-index: 199;
   }
+
+  > * {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
 }
 
 .desktopActionButtons {
@@ -109,3 +104,12 @@
 .offlineBanner {
   color: var(--theme-color-background-main);
 }
+
+.floatingMobileChatModalButton {
+  position: fixed;
+  width: 100px;
+  height: 40px;
+  bottom: 40px;
+  right: 10px;
+  font-weight: 600;
+}