diff --git a/app/hooks/useMobile.js b/app/hooks/useMobile.js
new file mode 100644
index 000000000..c143439c0
--- /dev/null
+++ b/app/hooks/useMobile.js
@@ -0,0 +1,8 @@
+// @flow
+import { useTheme } from "styled-components";
+import useMediaQuery from "hooks/useMediaQuery";
+
+export default function useMobile(): boolean {
+ const theme = useTheme();
+ return useMediaQuery(`(max-width: ${theme.breakpoints.tablet}px)`);
+}
diff --git a/app/scenes/Document/components/Header.js b/app/scenes/Document/components/Header.js
index 4b7ec95d3..9a621d716 100644
--- a/app/scenes/Document/components/Header.js
+++ b/app/scenes/Document/components/Header.js
@@ -22,6 +22,7 @@ import Fade from "components/Fade";
import Header from "components/Header";
import Modal from "components/Modal";
import Tooltip from "components/Tooltip";
+import useMobile from "hooks/useMobile";
import useStores from "hooks/useStores";
import DocumentMenu from "menus/DocumentMenu";
import NewChildDocumentMenu from "menus/NewChildDocumentMenu";
@@ -61,6 +62,7 @@ function DocumentHeader({
}: Props) {
const { t } = useTranslation();
const { auth, ui, shares, policies } = useStores();
+ const isMobile = useMobile();
const [showShareModal, setShowShareModal] = React.useState(false);
const handleSave = React.useCallback(() => {
@@ -182,7 +184,7 @@ function DocumentHeader({
)}
- {!isEditing && canShareDocument && (
+ {!isEditing && canShareDocument && (!isMobile || !isTemplate) && (
)}
{canEdit && editAction}
- {canEdit && can.createChildDocument && (
+ {canEdit && can.createChildDocument && !isMobile && (