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/ui/OfflineBanner/OfflineBanner.tsx

@@ -3,6 +3,7 @@ import { Divider } from 'antd';
 import { FC } from 'react';
 import formatDistanceToNow from 'date-fns/formatDistanceToNow';
 import dynamic from 'next/dynamic';
+import classNames from 'classnames';
 import styles from './OfflineBanner.module.scss';
 
 // Lazy loaded components
@@ -20,6 +21,7 @@ export type OfflineBannerProps = {
   showsHeader?: boolean;
   onNotifyClick?: () => void;
   onFollowClick?: () => void;
+  className?: string;
 };
 
 export const OfflineBanner: FC<OfflineBannerProps> = ({
@@ -31,6 +33,7 @@ export const OfflineBanner: FC<OfflineBannerProps> = ({
   showsHeader = true,
   onNotifyClick,
   onFollowClick,
+  className,
 }) => {
   let text;
   if (customText) {
@@ -74,7 +77,7 @@ export const OfflineBanner: FC<OfflineBannerProps> = ({
   }
 
   return (
-    <div id="offline-banner" className={styles.outerContainer}>
+    <div id="offline-banner" className={classNames(styles.outerContainer, className)}>
       <div className={styles.innerContainer}>
         {showsHeader && (
           <>