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/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;