Give chat a min-height that other elements yield to on mobile clients (#2676)

* Add className prop to some components

* Give mobile chatbox height priority over other elements

* Optimize for mobile landscape mode

* Make thumbnail background black

* Fix overflow issues on narrow screens

* Adjust layout for offline mode on mobile

* Fix main content width on Desktop

* Fix offline layout for desktop

web/components/video/VideoPoster/VideoPoster.module.scss

@@ -1,7 +1,10 @@
 .poster {
-  background-color: black;
   display: flex;
   justify-content: center;
   width: 100%;
   height: 100%;
 }
+
+.image {
+  background-color: black;
+}

web/components/video/VideoPoster/VideoPoster.tsx

@@ -36,6 +36,7 @@ export const VideoPoster: FC<VideoPosterProps> = ({ online, initialSrc, src: bas
           objectFit="contain"
           height="auto"
           width="100%"
+          className={styles.image}
         />
       )}
     </div>