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>
2023-04-26 23:31:23 +01:00 · 2023-04-26 23:31:23 +01:00 · 32c3f6a9b6
commit 32c3f6a9b6
parent b0a43526d8
16 changed files with 282 additions and 304 deletions
--- a/test/automated/browser/cypress/e2e/offline/01_offline_basic.cy.js
+++ b/test/automated/browser/cypress/e2e/offline/01_offline_basic.cy.js
@ -15,8 +15,8 @@ describe(`Basic tests`, () => {

 	// Verify the tags show up
 	it('Has correct tags visible', () => {
-		cy.contains('#owncast').should('be.visible');
-		cy.contains('#streaming').should('be.visible');
+		cy.contains('#owncast').should('exist');
+		cy.contains('#streaming').should('exist');
 	});

 	// it('Can open notify modal', () => {
--- a/web/components/chat/ChatContainer/ChatContainer.module.scss
+++ b/web/components/chat/ChatContainer/ChatContainer.module.scss
@ -1,3 +1,5 @@
+@import '../../../styles/mixins.scss';
+
 // The button that is displayed to scroll to the bottom of the chat.
 .toBottomWrap {
  display: flex;
--- a/web/components/layouts/Main/Main.module.scss
+++ b/web/components/layouts/Main/Main.module.scss
@ -1,11 +1,16 @@
@import '../../../styles/mixins.scss';

 .layout {
+  // this margin is for fixed header
+  margin-top: 55px;
  @include screen(tablet) {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
+    // this one is for fixed footer
+    margin-bottom: 30px
  }
+  
 }
--- a/web/components/layouts/Main/Main.tsx
+++ b/web/components/layouts/Main/Main.tsx
@ -8,6 +8,7 @@ import { Layout } from 'antd';
 import dynamic from 'next/dynamic';
 import Script from 'next/script';
 import { ErrorBoundary } from 'react-error-boundary';
+import { Footer } from '../../ui/Footer/Footer';
 import {
  ClientConfigStore,
  isChatAvailableSelector,
@ -30,12 +31,6 @@ import { AppStateOptions } from '../../stores/application-state';
 import { Noscript } from '../../ui/Noscript/Noscript';
 import { ServerStatus } from '../../../interfaces/server-status.model';

-const lockBodyStyle = `
-body {
-  overflow: hidden;
-}
-`;
-
 // Lazy loaded components

 const FatalErrorStateModal = dynamic(
@ -51,13 +46,13 @@ const FatalErrorStateModal = dynamic(
 export const Main: FC = () => {
  const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
  const clientStatus = useRecoilValue<ServerStatus>(serverStatusState);
-  const { name, customStyles } = clientConfig;
+  const { name } = clientConfig;
  const isChatAvailable = useRecoilValue<boolean>(isChatAvailableSelector);
  const fatalError = useRecoilValue<DisplayableError>(fatalErrorStateAtom);
  const appState = useRecoilValue<AppStateOptions>(appStateAtom);

  const layoutRef = useRef<HTMLDivElement>(null);
-  const { chatDisabled } = clientConfig;
+  const { chatDisabled, version } = clientConfig;
  const { videoAvailable } = appState;
  const { online, streamTitle } = clientStatus;

@ -96,11 +91,6 @@ export const Main: FC = () => {
        <meta name="msapplication-TileColor" content="#ffffff" />
        <meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png" />
        <meta name="theme-color" content="#ffffff" />
-
-        <style>
-          {customStyles}
-          {lockBodyStyle}
-        </style>
        <base target="_blank" />
      </Head>

@ -168,6 +158,7 @@ export const Main: FC = () => {
        {fatalError && (
          <FatalErrorStateModal title={fatalError.title} message={fatalError.message} />
        )}
+        <Footer version={version} />
      </Layout>

      <Noscript />
--- a/web/components/ui/Content/ActionButtons.tsx
+++ b/web/components/ui/Content/ActionButtons.tsx
@ -0,0 +1,88 @@
+import { Dispatch, FC, SetStateAction } from 'react';
+import dynamic from 'next/dynamic';
+import { Skeleton } from 'antd';
+import { ExternalAction } from '../../../interfaces/external-action';
+import { ActionButtonMenu } from '../../action-buttons/ActionButtonMenu/ActionButtonMenu';
+import { ActionButtonRow } from '../../action-buttons/ActionButtonRow/ActionButtonRow';
+import { FollowButton } from '../../action-buttons/FollowButton';
+import { NotifyButton } from '../../action-buttons/NotifyButton';
+import styles from './Content.module.scss';
+import { ActionButton } from '../../action-buttons/ActionButton/ActionButton';
+
+interface ActionButtonProps {
+  isMobile: boolean;
+  supportFediverseFeatures: boolean;
+  externalActions: ExternalAction[];
+  supportsBrowserNotifications: boolean;
+  showNotifyReminder: any;
+  setShowFollowModal: Dispatch<SetStateAction<boolean>>;
+  setShowNotifyModal: Dispatch<SetStateAction<boolean>>;
+  disableNotifyReminderPopup: () => void;
+  setExternalActionToDisplay: any;
+  externalActionSelected: (action: ExternalAction) => void;
+}
+
+const NotifyReminderPopup = dynamic(
+  () => import('../NotifyReminderPopup/NotifyReminderPopup').then(mod => mod.NotifyReminderPopup),
+  {
+    ssr: false,
+    loading: () => <Skeleton loading active paragraph={{ rows: 8 }} />,
+  },
+);
+
+const ActionButtons: FC<ActionButtonProps> = ({
+  isMobile,
+  supportFediverseFeatures,
+  supportsBrowserNotifications,
+  showNotifyReminder,
+  setShowFollowModal,
+  setShowNotifyModal,
+  disableNotifyReminderPopup,
+  externalActions,
+  setExternalActionToDisplay,
+  externalActionSelected,
+}) => {
+  const externalActionButtons = externalActions.map(action => (
+    <ActionButton
+      key={action.url || action.html}
+      action={action}
+      externalActionSelected={externalActionSelected}
+    />
+  ));
+
+  if (!isMobile) {
+    return (
+      <ActionButtonRow>
+        {externalActionButtons}
+        {supportFediverseFeatures && (
+          <FollowButton size="small" onClick={() => setShowFollowModal(true)} />
+        )}
+        {supportsBrowserNotifications && (
+          <NotifyReminderPopup
+            open={showNotifyReminder}
+            notificationClicked={() => setShowNotifyModal(true)}
+            notificationClosed={() => disableNotifyReminderPopup()}
+          >
+            <NotifyButton onClick={() => setShowNotifyModal(true)} />
+          </NotifyReminderPopup>
+        )}
+      </ActionButtonRow>
+    );
+  }
+
+  return (
+    <div className={styles.mobileActionButtonMenu}>
+      <ActionButtonMenu
+        className={styles.actionButtonMenu}
+        showFollowItem={supportFediverseFeatures}
+        showNotifyItem={supportsBrowserNotifications}
+        actions={externalActions}
+        externalActionSelected={setExternalActionToDisplay}
+        notifyItemSelected={() => setShowNotifyModal(true)}
+        followItemSelected={() => setShowFollowModal(true)}
+      />
+    </div>
+  );
+};
+
+export default ActionButtons;
--- a/web/components/ui/Content/Content.module.scss
+++ b/web/components/ui/Content/Content.module.scss
@ -1,59 +1,5 @@
@import '../../../styles/mixins.scss';

-.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: 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;
-      }
-    }
-  }
-
-  .mainSection::-webkit-scrollbar {
-    display: none;
-  }
-
-  .mainSection::-webkit-scrollbar-thumb {
-    display: none;
-  }
-
  .lowerSection {
    padding: var(--content-padding);
  }
@ -64,72 +10,60 @@
    flex-grow: 1;
    flex-shrink: 0;
    padding: 0.3em;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+
+  @include screen(tablet) {
+    //sets the position of tabbed content for online mode
+    top: 430px;
  }
+
+  @include screen(mobile) {
+    //sets the position of tabbed content for online mode
+  top: 280px;
+  }
+      
+  }
+
+.mobileNoTabs {
+  padding-top: 20px;
 } 

 .topSectionElement {
  background-color: var(--theme-color-components-video-background);
+  @include screen(tablet) {
+    // "sticks" the stream to the top of the page
+    position: sticky;
+    z-index: 100;
+  }
 }

 .offlineBanner {
  color: var(--theme-color-background-main);
 }

+.mobileActionButtonMenu {
+  position: absolute;
+  top: 4px;
+  right: 10px;
+  z-index: 200;
+}
+
+//not sure if this is needed
 .statusBar {
  flex-shrink: 0;
 }

-.leftCol {
-  display: flex;
-  flex-direction: column;
-}
-
+// not sure if this is needed
 .loadingSpinner {
  display: grid;
 }

-.replacementBar {
-  display: flex;
-  justify-content: space-between;
-  align-items: flex-start;
-
-  @include screen(tablet) {
-    height: var(--replacement-bar-height);
-  }
-}
-
 .defaultTabBar {
  width: 85%;
 }

-.defaultTabBar,
-.actionButtonMenu {
-  @include screen(tablet) {
-    margin-bottom: 0 !important;
-    padding-bottom: 0 !important;
-  }
-}
-
-.tabs {
-  width: 100%;
-
-  @include screen(tablet) {
-    position: relative;
-    > :global(.ant-tabs-content-holder) {
-      position: absolute;
-      height: calc(100% - var(--replacement-bar-height));
-      top: var(--replacement-bar-height);
-      left: 0;
-      right: 0;
-      bottom: 0;
-    }
-
-    > :global(.ant-tabs-content-holder .ant-tabs-content) {
-      padding-top: 16px;
-    }
-  }
-}
-
 .bottomPageContentContainer {
  background-color: var(--theme-color-components-content-background);
  padding: calc(2 * var(--content-padding));
--- a/web/components/ui/Content/Content.tsx
+++ b/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}
--- a/web/components/ui/Content/DesktopContent.tsx
+++ b/web/components/ui/Content/DesktopContent.tsx
@ -70,7 +70,7 @@ export const DesktopContent: FC<DesktopContentProps> = ({
        />
      )}
    >
-      <div className={styles.lowerHalf} id="skip-to-content">
+      <div id="skip-to-content">
        <ContentHeader
          name={name}
          summary={summary}
@ -80,7 +80,7 @@ export const DesktopContent: FC<DesktopContentProps> = ({
        />
      </div>

-      <div className={styles.lowerSection}>
+      <div>
        {items.length > 1 ? (
          <Tabs defaultActiveKey="0" items={items} />
        ) : (
--- a/web/components/ui/Content/MobileContent.tsx
+++ b/web/components/ui/Content/MobileContent.tsx
@ -4,13 +4,10 @@ import { Skeleton, TabsProps } from 'antd';
 import { ErrorBoundary } from 'react-error-boundary';
 import { SocialLink } from '../../../interfaces/social-link.model';
 import styles from './Content.module.scss';
-import mobileStyles from './MobileContent.module.scss';
 import { CustomPageContent } from '../CustomPageContent/CustomPageContent';
 import { ContentHeader } from '../../common/ContentHeader/ContentHeader';
 import { ChatMessage } from '../../../interfaces/chat-message.model';
 import { CurrentUser } from '../../../interfaces/current-user';
-import { ActionButtonMenu } from '../../action-buttons/ActionButtonMenu/ActionButtonMenu';
-import { ExternalAction } from '../../../interfaces/external-action';
 import { ComponentError } from '../ComponentError/ComponentError';

 export type MobileContentProps = {
@ -19,19 +16,12 @@ export type MobileContentProps = {
  tags: string[];
  socialHandles: SocialLink[];
  extraPageContent: string;
-  notifyItemSelected: () => void;
-  followItemSelected: () => void;
-  setExternalActionToDisplay: (action: ExternalAction) => void;
-  setShowNotifyPopup: (show: boolean) => void;
  setShowFollowModal: (show: boolean) => void;
  supportFediverseFeatures: boolean;
  messages: ChatMessage[];
  currentUser: CurrentUser;
  showChat: boolean;
  chatEnabled: boolean;
-  actions: ExternalAction[];
-  externalActionSelected: (action: ExternalAction) => void;
-  supportsBrowserNotifications: boolean;
 };

 // lazy loaded components
@ -88,25 +78,6 @@ const ChatContent: FC<ChatContentProps> = ({ showChat, chatEnabled, messages, cu
  );
 };

-const ActionButton = ({
-  supportFediverseFeatures,
-  supportsBrowserNotifications,
-  actions,
-  setExternalActionToDisplay,
-  setShowNotifyPopup,
-  setShowFollowModal,
-}) => (
-  <ActionButtonMenu
-    className={styles.actionButtonMenu}
-    showFollowItem={supportFediverseFeatures}
-    showNotifyItem={supportsBrowserNotifications}
-    actions={actions}
-    externalActionSelected={setExternalActionToDisplay}
-    notifyItemSelected={() => setShowNotifyPopup(true)}
-    followItemSelected={() => setShowFollowModal(true)}
-  />
-);
-
 export const MobileContent: FC<MobileContentProps> = ({
  name,
  summary,
@ -117,12 +88,8 @@ export const MobileContent: FC<MobileContentProps> = ({
  currentUser,
  showChat,
  chatEnabled,
-  actions,
-  setExternalActionToDisplay,
-  setShowNotifyPopup,
  setShowFollowModal,
  supportFediverseFeatures,
-  supportsBrowserNotifications,
 }) => {
  const aboutTabContent = (
    <>
@ -160,20 +127,6 @@ export const MobileContent: FC<MobileContentProps> = ({
    items.push({ label: 'Followers', key: '3', children: followersTabContent });
  }

-  const replacementTabBar = (props, DefaultTabBar) => (
-    <div className={styles.replacementBar}>
-      <DefaultTabBar {...props} className={styles.defaultTabBar} />
-      <ActionButton
-        supportFediverseFeatures={supportFediverseFeatures}
-        supportsBrowserNotifications={supportsBrowserNotifications}
-        actions={actions}
-        setExternalActionToDisplay={setExternalActionToDisplay}
-        setShowNotifyPopup={setShowNotifyPopup}
-        setShowFollowModal={setShowFollowModal}
-      />
-    </div>
-  );
-
  return (
    <ErrorBoundary
      // eslint-disable-next-line react/no-unstable-nested-components
@ -182,29 +135,9 @@ export const MobileContent: FC<MobileContentProps> = ({
      )}
    >
      <div className={styles.lowerSectionMobile}>
-        {items.length > 1 ? (
-          <Tabs
-            className={styles.tabs}
-            defaultActiveKey="0"
-            items={items}
-            renderTabBar={replacementTabBar}
-          />
-        ) : (
-          <>
-            <div className={mobileStyles.noTabsActionMenuButton}>
-              <ActionButton
-                supportFediverseFeatures={supportFediverseFeatures}
-                supportsBrowserNotifications={supportsBrowserNotifications}
-                actions={actions}
-                setExternalActionToDisplay={setExternalActionToDisplay}
-                setShowNotifyPopup={setShowNotifyPopup}
-                setShowFollowModal={setShowFollowModal}
-              />
-            </div>
-            <div className={mobileStyles.noTabsAboutContent}>{aboutTabContent}</div>
-          </>
-        )}
+        {items.length > 1 && <Tabs defaultActiveKey="0" items={items} />}
      </div>
+      <div className={styles.mobileNoTabs}>{items.length <= 1 && aboutTabContent}</div>
    </ErrorBoundary>
  );
 };
--- a/web/components/ui/Footer/Footer.module.scss
+++ b/web/components/ui/Footer/Footer.module.scss
@ -1,7 +1,7 @@
@import '../../../styles/mixins.scss';

 .footer {
-  display: none;
+  display: flex;
  align-items: center;
  flex-wrap: wrap;
  height: var(--footer-height);
@ -16,8 +16,17 @@
  font-weight: 400;
  border-top: 1px solid rgba(214, 211, 211, 0.5);

+  @include screen(mobile) {
+    position: fixed;
+    bottom: 0;
+  
+  }
+
  @include screen(tablet) {
    font-size: 10px;
+    position: fixed;
+    bottom: 0;
+
  }

  @include screen(desktop) {
--- a/web/components/ui/Header/Header.module.scss
+++ b/web/components/ui/Header/Header.module.scss
@ -9,14 +9,20 @@
  padding: 0.7rem var(--content-padding);
  box-shadow: 0px 1px 3px 1px rgb(0 0 0 / 10%);
  background-color: var(--theme-color-background-header);
-
+  position: fixed;
+  top:0;
+  width: 100%;
+  z-index: 200;
  h1 {
    margin-top: unset;
    margin-bottom: unset;
  }
-
-  @include screen(mobile) {
+  // fixes header on tablet and below
+  @include screen(tablet) {
    --header-height: 3.85rem;
+    position: fixed;
+    top: 0px;
+    width: 100%;
  }
 }

--- a/web/components/ui/OfflineBanner/OfflineBanner.module.scss
+++ b/web/components/ui/OfflineBanner/OfflineBanner.module.scss
@ -3,6 +3,15 @@
 .outerContainer {
  display: flex;
  justify-content: center;
+  align-items: center;
+
+  @include screen(tablet) {
+      height: 430px;
+  }
+
+  @include screen (mobile) {
+    height: 280px;
+  }
 }

 .innerContainer {
@ -11,6 +20,7 @@
  flex-direction: column;
  margin: 3rem auto;
  padding: 2.4em;
+  color: var(--color-owncast-palette-3);

  @include screen(tablet) {
    font-size: 1.2rem;
--- a/web/components/ui/Sidebar/Sidebar.module.scss
+++ b/web/components/ui/Sidebar/Sidebar.module.scss
@ -2,10 +2,16 @@

 .root {
  background-color: var(--theme-color-components-chat-background);
-  display: none;
  @include screen(desktop) {
-    position: sticky;
-    display: block;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    top: 69px;
+    z-index:100;
+  }
+
+  @media screen and (max-width: 1120px) and (min-width: 768px) {
+    top: 65px;
  }
 }

@ -19,4 +25,5 @@ Only way to target it apparently
  -moz-box-flex: 1 !important;
  flex-grow: 1 !important;
  height: 100% !important;
+  width: 100%!important;
 }
--- a/web/components/ui/Sidebar/Sidebar.tsx
+++ b/web/components/ui/Sidebar/Sidebar.tsx
@ -27,7 +27,7 @@ export const Sidebar: FC = () => {

  if (!currentUser) {
    return (
-      <Sider className={styles.root} collapsedWidth={0} width={320}>
+      <Sider className={styles.root} collapsedWidth={0} width={100}>
        <Spin spinning size="large" />
      </Sider>
    );
--- a/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
+++ b/web/components/video/OwncastPlayer/OwncastPlayer.module.scss
@ -12,6 +12,23 @@
    max-height: 75vh;
  }

+  @include screen(desktop) {
+    // prevent sidebar from overlapping stream
+    // padding-right: 320px;
+  }
+
+  //set height of player for tablet
+  @include screen(tablet) {
+    height: 400px;
+    max-height: 400px;
+  }
+  
+  //set height of player for mobile
+  @include screen(mobile) {
+    height: 250px;
+    max-height: 250px;
+  }
+
  .player,
  .poster {
    width: 100%;
--- a/web/styles/mixins.scss
+++ b/web/styles/mixins.scss
@ -10,6 +10,8 @@
      @content;
    }
  }
+
+  // tablet will also apply to mobile as there is no cut-off for min-width, however changing this now could break CSS all over the site.
  @if $breakpoint == tablet {
    @media only screen and (max-width: 768px) {
      @content;