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/CrossfadeImage/CrossfadeImage.tsx

@@ -8,6 +8,7 @@ export type CrossfadeImageProps = {
   height: string;
   objectFit?: ObjectFit;
   duration?: string;
+  className?: string;
 };
 
 const imgStyle: React.CSSProperties = {
@@ -22,6 +23,7 @@ export const CrossfadeImage: FC<CrossfadeImageProps> = ({
   height,
   objectFit = 'fill',
   duration = '1s',
+  className,
 }) => {
   const spanStyle: React.CSSProperties = useMemo(
     () => ({
@@ -52,7 +54,7 @@ export const CrossfadeImage: FC<CrossfadeImageProps> = ({
   };
 
   return (
-    <span style={spanStyle}>
+    <span style={spanStyle} className={className}>
       {[...srcs, nextSrc].map(
         (singleSrc, index) =>
           singleSrc !== '' && (