From 90d2739afd2c70a3dcaf2f9aa5248fe2d06c5847 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sat, 22 Apr 2023 19:57:11 -0700
Subject: [PATCH] fix(mobile): fix action bar button not appearing. Closes
 #2938

---
 .../ui/Content/MobileContent.module.scss      | 11 +++++
 web/components/ui/Content/MobileContent.tsx   | 47 +++++++++++++++----
 2 files changed, 50 insertions(+), 8 deletions(-)
 create mode 100644 web/components/ui/Content/MobileContent.module.scss

diff --git a/web/components/ui/Content/MobileContent.module.scss b/web/components/ui/Content/MobileContent.module.scss
new file mode 100644
index 000000000..35b2d3c78
--- /dev/null
+++ b/web/components/ui/Content/MobileContent.module.scss
@@ -0,0 +1,11 @@
+.noTabsActionMenuButton {
+  position: absolute;
+  right: 0px;
+  margin-right: 10px;
+  z-index: 999;
+}
+
+.noTabsAboutContent {
+  position: relative;
+  top: 0px;
+}
diff --git a/web/components/ui/Content/MobileContent.tsx b/web/components/ui/Content/MobileContent.tsx
index eb95d22dd..76dfe2c32 100644
--- a/web/components/ui/Content/MobileContent.tsx
+++ b/web/components/ui/Content/MobileContent.tsx
@@ -4,6 +4,7 @@ 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';
@@ -87,6 +88,25 @@ 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,
@@ -143,14 +163,13 @@ export const MobileContent: FC<MobileContentProps> = ({
   const replacementTabBar = (props, DefaultTabBar) => (
     <div className={styles.replacementBar}>
       <DefaultTabBar {...props} className={styles.defaultTabBar} />
-      <ActionButtonMenu
-        className={styles.actionButtonMenu}
-        showFollowItem={supportFediverseFeatures}
-        showNotifyItem={supportsBrowserNotifications}
+      <ActionButton
+        supportFediverseFeatures={supportFediverseFeatures}
+        supportsBrowserNotifications={supportsBrowserNotifications}
         actions={actions}
-        externalActionSelected={setExternalActionToDisplay}
-        notifyItemSelected={() => setShowNotifyPopup(true)}
-        followItemSelected={() => setShowFollowModal(true)}
+        setExternalActionToDisplay={setExternalActionToDisplay}
+        setShowNotifyPopup={setShowNotifyPopup}
+        setShowFollowModal={setShowFollowModal}
       />
     </div>
   );
@@ -171,7 +190,19 @@ export const MobileContent: FC<MobileContentProps> = ({
             renderTabBar={replacementTabBar}
           />
         ) : (
-          aboutTabContent
+          <>
+            <div className={mobileStyles.noTabsActionMenuButton}>
+              <ActionButton
+                supportFediverseFeatures={supportFediverseFeatures}
+                supportsBrowserNotifications={supportsBrowserNotifications}
+                actions={actions}
+                setExternalActionToDisplay={setExternalActionToDisplay}
+                setShowNotifyPopup={setShowNotifyPopup}
+                setShowFollowModal={setShowFollowModal}
+              />
+            </div>
+            <div className={mobileStyles.noTabsAboutContent}>{aboutTabContent}</div>
+          </>
         )}
       </div>
     </ErrorBoundary>