fix: #2668 Page Vertical Spacing Issues (#2863)

* fix: #2668 Page Vertical Spacing Issues

* Update test to reflect mobile work

* chore: refactor action buttons

---------

Co-authored-by: thisProjects <wibbet@wobbet.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>

web/components/ui/Content/Content.tsx

@@ -1,8 +1,9 @@
 import { useRecoilState, useRecoilValue } from 'recoil';
-import { Skeleton } from 'antd';
+import { Skeleton, Col, Row } from 'antd';
 import { FC, useEffect, useState } from 'react';
 import dynamic from 'next/dynamic';
 import classnames from 'classnames';
+import ActionButtons from './ActionButtons';
 import { LOCAL_STORAGE_KEYS, getLocalStorage, setLocalStorage } from '../../../utils/localStorage';
 import isPushNotificationSupported from '../../../utils/browserPushNotifications';
 
@@ -21,14 +22,8 @@ import { ClientConfig } from '../../../interfaces/client-config.model';
 
 import styles from './Content.module.scss';
 import { Sidebar } from '../Sidebar/Sidebar';
-import { Footer } from '../Footer/Footer';
-
-import { ActionButtonRow } from '../../action-buttons/ActionButtonRow/ActionButtonRow';
-import { ActionButton } from '../../action-buttons/ActionButton/ActionButton';
 import { OfflineBanner } from '../OfflineBanner/OfflineBanner';
 import { AppStateOptions } from '../../stores/application-state';
-import { FollowButton } from '../../action-buttons/FollowButton';
-import { NotifyButton } from '../../action-buttons/NotifyButton';
 import { ServerStatus } from '../../../interfaces/server-status.model';
 import { Statusbar } from '../Statusbar/Statusbar';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
@@ -58,14 +53,6 @@ const BrowserNotifyModal = dynamic(
   },
 );
 
-const NotifyReminderPopup = dynamic(
-  () => import('../NotifyReminderPopup/NotifyReminderPopup').then(mod => mod.NotifyReminderPopup),
-  {
-    ssr: false,
-    loading: () => <Skeleton loading active paragraph={{ rows: 8 }} />,
-  },
-);
-
 const OwncastPlayer = dynamic(
   () => import('../../video/OwncastPlayer/OwncastPlayer').then(mod => mod.OwncastPlayer),
   {
@@ -114,7 +101,6 @@ export const Content: FC = () => {
     useRecoilValue<ServerStatus>(serverStatusState);
   const {
     extraPageContent,
-    version,
     name,
     summary,
     socialHandles,
@@ -147,14 +133,6 @@ export const Content: FC = () => {
     }
   };
 
-  const externalActionButtons = externalActions.map(action => (
-    <ActionButton
-      key={action.url || action.html}
-      action={action}
-      externalActionSelected={externalActionSelected}
-    />
-  ));
-
   const incrementVisitCounter = () => {
     let visits = parseInt(getLocalStorage(LOCAL_STORAGE_KEYS.userVisitCount), 10);
     if (Number.isNaN(visits)) {
@@ -201,79 +179,82 @@ export const Content: FC = () => {
 
   const showChat = online && !chatDisabled && isChatVisible;
 
+  // accounts for sidebar width when online in desktop
+  const dynamicPadding = online && !isMobile ? '320px' : '0px';
+
   return (
     <>
-      <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={supportsBrowserNotifications}
-                fediverseAccount={fediverseAccount}
-                lastLive={lastDisconnectTime}
-                onNotifyClick={() => setShowNotifyModal(true)}
-                onFollowClick={() => setShowFollowModal(true)}
-                className={classnames([styles.topSectionElement, styles.offlineBanner])}
+      <>
+        {appState.appLoading && (
+          <Skeleton loading active paragraph={{ rows: 7 }} className={styles.topSectionElement} />
+        )}
+        {showChat && !isMobile && <Sidebar />}
+        <Row>
+          <Col span={24} style={{ paddingRight: dynamicPadding }}>
+            {online && (
+              <OwncastPlayer
+                source="/hls/stream.m3u8"
+                online={online}
+                title={streamTitle || name}
+                className={styles.topSectionElement}
               />
-            </div>
-          )}
-          {isStreamLive ? (
-            <Statusbar
-              online={online}
-              lastConnectTime={lastConnectTime}
-              lastDisconnectTime={lastDisconnectTime}
-              viewerCount={viewerCount}
-              className={classnames(styles.topSectionElement, styles.statusBar)}
+            )}
+            {!online && !appState.appLoading && (
+              <div id="offline-message">
+                <OfflineBanner
+                  showsHeader={false}
+                  streamName={name}
+                  customText={offlineMessage}
+                  notificationsEnabled={supportsBrowserNotifications}
+                  fediverseAccount={fediverseAccount}
+                  lastLive={lastDisconnectTime}
+                  onNotifyClick={() => setShowNotifyModal(true)}
+                  onFollowClick={() => setShowFollowModal(true)}
+                  className={styles.topSectionElement}
+                />
+              </div>
+            )}
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24} style={{ paddingRight: dynamicPadding }}>
+            {isStreamLive && (
+              <Statusbar
+                online={online}
+                lastConnectTime={lastConnectTime}
+                lastDisconnectTime={lastDisconnectTime}
+                viewerCount={viewerCount}
+                className={classnames(styles.topSectionElement, styles.statusBar)}
+              />
+            )}
+          </Col>
+        </Row>
+        <Row>
+          <Col span={24} style={{ paddingRight: dynamicPadding }}>
+            <ActionButtons
+              isMobile={isMobile}
+              supportFediverseFeatures={supportFediverseFeatures}
+              supportsBrowserNotifications={supportsBrowserNotifications}
+              showNotifyReminder={showNotifyReminder}
+              setShowNotifyModal={setShowNotifyModal}
+              disableNotifyReminderPopup={disableNotifyReminderPopup}
+              externalActions={externalActions}
+              setExternalActionToDisplay={setExternalActionToDisplay}
+              setShowFollowModal={setShowFollowModal}
+              externalActionSelected={externalActionSelected}
             />
-          ) : (
-            <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>
-              )}
+          </Col>
+        </Row>
 
-              <Modal
-                title="Browser Notifications"
-                open={showNotifyModal}
-                afterClose={() => disableNotifyReminderPopup()}
-                handleCancel={() => disableNotifyReminderPopup()}
-              >
-                <BrowserNotifyModal />
-              </Modal>
-            </div>
-          </div>
+        <Modal
+          title="Browser Notifications"
+          open={showNotifyModal}
+          afterClose={() => disableNotifyReminderPopup()}
+          handleCancel={() => disableNotifyReminderPopup()}
+        >
+          <BrowserNotifyModal />
+        </Modal>
+        <Row>
           {isMobile ? (
             <MobileContent
               name={name}
@@ -284,32 +265,25 @@ export const Content: FC = () => {
               messages={messages}
               currentUser={currentUser}
               showChat={showChat}
-              actions={externalActions}
-              setExternalActionToDisplay={externalActionSelected}
-              setShowNotifyPopup={setShowNotifyModal}
               setShowFollowModal={setShowFollowModal}
               supportFediverseFeatures={supportFediverseFeatures}
-              supportsBrowserNotifications={supportsBrowserNotifications}
-              notifyItemSelected={() => setShowNotifyModal(true)}
-              followItemSelected={() => setShowFollowModal(true)}
-              externalActionSelected={externalActionSelected}
               chatEnabled={isChatAvailable}
             />
           ) : (
-            <DesktopContent
-              name={name}
-              summary={summary}
-              tags={tags}
-              socialHandles={socialHandles}
-              extraPageContent={extraPageContent}
-              setShowFollowModal={setShowFollowModal}
-              supportFediverseFeatures={supportFediverseFeatures}
-            />
+            <Col span={24} style={{ paddingRight: dynamicPadding }}>
+              <DesktopContent
+                name={name}
+                summary={summary}
+                tags={tags}
+                socialHandles={socialHandles}
+                extraPageContent={extraPageContent}
+                setShowFollowModal={setShowFollowModal}
+                supportFediverseFeatures={supportFediverseFeatures}
+              />
+            </Col>
           )}
-          {!isMobile && <Footer version={version} />}
-        </div>
-        {showChat && !isMobile && <Sidebar />}
-      </div>
+        </Row>
+      </>
       {externalActionToDisplay && (
         <ExternalModal
           externalActionToDisplay={externalActionToDisplay}