diff --git a/web/components/ui/Content/ActionButtons.tsx b/web/components/ui/Content/ActionButtons.tsx index 5f213c98f..6b5443e5e 100644 --- a/web/components/ui/Content/ActionButtons.tsx +++ b/web/components/ui/Content/ActionButtons.tsx @@ -10,7 +10,6 @@ import styles from './Content.module.scss'; import { ActionButton } from '../../action-buttons/ActionButton/ActionButton'; interface ActionButtonProps { - isMobile: boolean; supportFediverseFeatures: boolean; externalActions: ExternalAction[]; supportsBrowserNotifications: boolean; @@ -31,7 +30,6 @@ const NotifyReminderPopup = dynamic( ); const ActionButtons: FC = ({ - isMobile, supportFediverseFeatures, supportsBrowserNotifications, showNotifyReminder, @@ -50,38 +48,37 @@ const ActionButtons: FC = ({ /> )); - if (!isMobile) { - return ( - - {externalActionButtons} - {supportFediverseFeatures && ( - setShowFollowModal(true)} /> - )} - {supportsBrowserNotifications && ( - setShowNotifyModal(true)} - notificationClosed={() => disableNotifyReminderPopup()} - > - setShowNotifyModal(true)} /> - - )} - - ); - } - return ( -
- setShowNotifyModal(true)} - followItemSelected={() => setShowFollowModal(true)} - /> -
+ <> +
+ + {externalActionButtons} + {supportFediverseFeatures && ( + setShowFollowModal(true)} /> + )} + {supportsBrowserNotifications && ( + setShowNotifyModal(true)} + notificationClosed={() => disableNotifyReminderPopup()} + > + setShowNotifyModal(true)} /> + + )} + +
+
+ setShowNotifyModal(true)} + followItemSelected={() => setShowFollowModal(true)} + /> +
+ ); }; diff --git a/web/components/ui/Content/Content.module.scss b/web/components/ui/Content/Content.module.scss index eb5c859fb..a9f322d8d 100644 --- a/web/components/ui/Content/Content.module.scss +++ b/web/components/ui/Content/Content.module.scss @@ -47,10 +47,24 @@ } .mobileActionButtonMenu { - position: absolute; - top: 4px; - right: 10px; - z-index: 200; + display: none; + + @include screen(tablet) { + display: block; + position: absolute; + top: 4px; + right: 10px; + z-index: 200; + } +} + +.desktopActionButtons { + display: block; + + @include screen(tablet) { + display: none; + } + } //not sure if this is needed diff --git a/web/components/ui/Content/Content.tsx b/web/components/ui/Content/Content.tsx index 3f5111c16..b7fc41739 100644 --- a/web/components/ui/Content/Content.tsx +++ b/web/components/ui/Content/Content.tsx @@ -233,7 +233,6 @@ export const Content: FC = () => {