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

@@ -3,19 +3,46 @@
 .root {
   display: grid;
   grid-template-columns: 1fr auto;
+  grid-template-rows: 100%;
   width: 100%;
   background-color: var(--theme-color-background-main);
+  height: 100%;
+  min-height: 0;
 
   @include screen(desktop) {
     height: var(--content-height);
   }
 
   .mainSection {
-    display: flex;
-    flex-direction: column;
+    display: grid;
+    grid-template-rows: min-content // Skeleton when app is loading
+      minmax(30px, min-content) // player
+      min-content // status bar when live
+      min-content // mid section
+      minmax(250px, 1fr) // mobile content
+;
+    grid-template-columns: 100%;
+
+    &.offline {
+      grid-template-rows: min-content // Skeleton when app is loading
+        min-content // offline banner
+        min-content // status bar when live
+        min-content // mid section
+        minmax(250px, 1fr) // mobile content
+;
+    }
+
+    @include screen(tablet) {
+      grid-template-columns: 100vw;
+    }
 
     @include screen(desktop) {
       overflow-y: scroll;
+      grid-template-rows: unset;
+
+      &.offline {
+        grid-template-rows: unset;
+      }
     }
   }
 
@@ -27,10 +54,6 @@
     display: none;
   }
 
-  .topSection {
-    padding: 0;
-    background-color: var(--theme-color-components-video-background);
-  }
   .lowerSection {
     padding: 0em 2%;
     margin-bottom: 2em;
@@ -44,6 +67,14 @@
   }
 }
 
+.topSectionElement {
+  background-color: var(--theme-color-components-video-background);
+}
+
+.statusBar {
+  flex-shrink: 0;
+}
+
 .leftCol {
   display: flex;
   flex-direction: column;
@@ -53,13 +84,6 @@
   display: grid;
 }
 
-.main {
-  display: grid;
-  flex: 1;
-  height: 100%;
-  grid-template-rows: 1fr auto;
-}
-
 .replacementBar {
   display: flex;
   justify-content: space-between;

web/components/ui/Content/Content.tsx

@@ -2,6 +2,7 @@ import { useRecoilState, useRecoilValue } from 'recoil';
 import { Skeleton } from 'antd';
 import { FC, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
+import classnames from 'classnames';
 import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../utils/localStorage';
 import isPushNotificationSupported from '../../../utils/browserPushNotifications';
 
@@ -331,105 +332,110 @@ export const Content: FC = () => {
 
   return (
     <>
-      <div className={styles.main}>
-        <div className={styles.root}>
-          <div className={styles.mainSection}>
-            <div className={styles.topSection}>
-              {appState.appLoading && <Skeleton loading active paragraph={{ rows: 7 }} />}
-              {online && (
-                <OwncastPlayer
-                  source="/hls/stream.m3u8"
-                  online={online}
-                  title={streamTitle || name}
-                />
-              )}
-              {!online && !appState.appLoading && (
-                <div id="offline-message">
-                  <OfflineBanner
-                    showsHeader={false}
-                    streamName={name}
-                    customText={offlineMessage}
-                    notificationsEnabled={browserNotificationsEnabled}
-                    fediverseAccount={fediverseAccount}
-                    lastLive={lastDisconnectTime}
-                    onNotifyClick={() => setShowNotifyModal(true)}
-                    onFollowClick={() => setShowFollowModal(true)}
-                  />
-                </div>
-              )}
-              {isStreamLive && (
-                <Statusbar
-                  online={online}
-                  lastConnectTime={lastConnectTime}
-                  lastDisconnectTime={lastDisconnectTime}
-                  viewerCount={viewerCount}
-                />
-              )}
+      <div className={styles.root}>
+        <div className={classnames(styles.mainSection, { [styles.offline]: !online })}>
+          {appState.appLoading ? (
+            <Skeleton loading active paragraph={{ rows: 7 }} className={styles.topSectionElement} />
+          ) : (
+            <div className="skeleton-placeholder" />
+          )}
+          {online && (
+            <OwncastPlayer
+              source="/hls/stream.m3u8"
+              online={online}
+              title={streamTitle || name}
+              className={styles.topSectionElement}
+            />
+          )}
+          {!online && !appState.appLoading && (
+            <div id="offline-message">
+              <OfflineBanner
+                showsHeader={false}
+                streamName={name}
+                customText={offlineMessage}
+                notificationsEnabled={browserNotificationsEnabled}
+                fediverseAccount={fediverseAccount}
+                lastLive={lastDisconnectTime}
+                onNotifyClick={() => setShowNotifyModal(true)}
+                onFollowClick={() => setShowFollowModal(true)}
+                className={styles.topSectionElement}
+              />
             </div>
-            <div className={styles.midSection}>
-              <div className={styles.buttonsLogoTitleSection}>
-                {!isMobile && (
-                  <ActionButtonRow>
-                    {externalActionButtons}
-                    {supportFediverseFeatures && (
-                      <FollowButton size="small" onClick={() => setShowFollowModal(true)} />
-                    )}
-                    {supportsBrowserNotifications && (
-                      <NotifyReminderPopup
-                        open={showNotifyReminder}
-                        notificationClicked={() => setShowNotifyModal(true)}
-                        notificationClosed={() => disableNotifyReminderPopup()}
-                      >
-                        <NotifyButton onClick={() => setShowNotifyModal(true)} />
-                      </NotifyReminderPopup>
-                    )}
-                  </ActionButtonRow>
-                )}
+          )}
+          {isStreamLive ? (
+            <Statusbar
+              online={online}
+              lastConnectTime={lastConnectTime}
+              lastDisconnectTime={lastDisconnectTime}
+              viewerCount={viewerCount}
+              className={classnames(styles.topSectionElement, styles.statusBar)}
+            />
+          ) : (
+            <div className="statusbar-placeholder" />
+          )}
+          <div className={styles.midSection}>
+            <div className={styles.buttonsLogoTitleSection}>
+              {!isMobile && (
+                <ActionButtonRow>
+                  {externalActionButtons}
+                  {supportFediverseFeatures && (
+                    <FollowButton size="small" onClick={() => setShowFollowModal(true)} />
+                  )}
+                  {supportsBrowserNotifications && (
+                    <NotifyReminderPopup
+                      open={showNotifyReminder}
+                      notificationClicked={() => setShowNotifyModal(true)}
+                      notificationClosed={() => disableNotifyReminderPopup()}
+                    >
+                      <NotifyButton onClick={() => setShowNotifyModal(true)} />
+                    </NotifyReminderPopup>
+                  )}
+                </ActionButtonRow>
+              )}
 
-                <Modal
-                  title="Browser Notifications"
-                  open={showNotifyModal}
-                  afterClose={() => disableNotifyReminderPopup()}
-                  handleCancel={() => disableNotifyReminderPopup()}
-                >
-                  <BrowserNotifyModal />
-                </Modal>
-              </div>
+              <Modal
+                title="Browser Notifications"
+                open={showNotifyModal}
+                afterClose={() => disableNotifyReminderPopup()}
+                handleCancel={() => disableNotifyReminderPopup()}
+              >
+                <BrowserNotifyModal />
+              </Modal>
             </div>
-            {isMobile ? (
-              <MobileContent
-                name={name}
-                streamTitle={streamTitle}
-                summary={summary}
-                tags={tags}
-                socialHandles={socialHandles}
-                extraPageContent={extraPageContent}
-                messages={messages}
-                currentUser={currentUser}
-                showChat={showChat}
-                actions={externalActions}
-                setExternalActionToDisplay={externalActionSelected}
-                setShowNotifyPopup={setShowNotifyModal}
-                setShowFollowModal={setShowFollowModal}
-                supportFediverseFeatures={supportFediverseFeatures}
-                supportsBrowserNotifications={supportsBrowserNotifications}
-              />
-            ) : (
-              <DesktopContent
-                name={name}
-                streamTitle={streamTitle}
-                summary={summary}
-                tags={tags}
-                socialHandles={socialHandles}
-                extraPageContent={extraPageContent}
-                setShowFollowModal={setShowFollowModal}
-                supportFediverseFeatures={supportFediverseFeatures}
-              />
-            )}
-            {!isMobile && <Footer version={version} />}
           </div>
-          {showChat && !isMobile && <Sidebar />}
+          {isMobile ? (
+            <MobileContent
+              name={name}
+              streamTitle={streamTitle}
+              summary={summary}
+              tags={tags}
+              socialHandles={socialHandles}
+              extraPageContent={extraPageContent}
+              messages={messages}
+              currentUser={currentUser}
+              showChat={showChat}
+              actions={externalActions}
+              setExternalActionToDisplay={externalActionSelected}
+              setShowNotifyPopup={setShowNotifyModal}
+              setShowFollowModal={setShowFollowModal}
+              supportFediverseFeatures={supportFediverseFeatures}
+              supportsBrowserNotifications={supportsBrowserNotifications}
+            />
+          ) : (
+            <DesktopContent
+              name={name}
+              streamTitle={streamTitle}
+              summary={summary}
+              tags={tags}
+              socialHandles={socialHandles}
+              extraPageContent={extraPageContent}
+              setShowFollowModal={setShowFollowModal}
+              supportFediverseFeatures={supportFediverseFeatures}
+            />
+          )}
+          {!isMobile && <Footer version={version} />}
         </div>
+        {showChat && !isMobile && <Sidebar />}
       </div>
       {externalActionToDisplay && (
         <ExternalModal