fix(mobile): fix action bar button not appearing. Closes #2938

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;
+}

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
+      <ActionButton
-        className={styles.actionButtonMenu}
+        supportFediverseFeatures={supportFediverseFeatures}
-        showFollowItem={supportFediverseFeatures}
+        supportsBrowserNotifications={supportsBrowserNotifications}
-        showNotifyItem={supportsBrowserNotifications}
         actions={actions}
-        externalActionSelected={setExternalActionToDisplay}
+        setExternalActionToDisplay={setExternalActionToDisplay}
-        notifyItemSelected={() => setShowNotifyPopup(true)}
+        setShowNotifyPopup={setShowNotifyPopup}
-        followItemSelected={() => setShowFollowModal(true)}
+        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>