Hide collection header share button on mobile (no space, available in ...)

app/scenes/Collection/components/ShareButton.tsx

@@ -8,6 +8,7 @@ import Button from "~/components/Button";
 import Popover from "~/components/Popover";
 import SharePopover from "~/components/Sharing/Collection/SharePopover";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 
 type Props = {
@@ -28,6 +29,10 @@ function ShareButton({ collection }: Props) {
     placement: "bottom-end",
     unstable_fixed: true,
   });
+  const isMobile = useMobile();
+  if (isMobile) {
+    return null;
+  }
 
   const icon = isPubliclyShared ? (
     <GlobeIcon />

app/scenes/Document/components/Header.tsx

@@ -259,7 +259,7 @@ function DocumentHeader({
                 />
               </Action>
             )}
-            {!isEditing && !isRevision && !isMobile && can.update && (
+            {!isEditing && !isRevision && can.update && (
               <Action>
                 <ShareButton document={document} />
               </Action>

app/scenes/Document/components/ShareButton.tsx

@@ -8,6 +8,7 @@ import Button from "~/components/Button";
 import Popover from "~/components/Popover";
 import SharePopover from "~/components/Sharing/Document";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 
 type Props = {
@@ -33,6 +34,11 @@ function ShareButton({ document }: Props) {
     unstable_fixed: true,
   });
 
+  const isMobile = useMobile();
+  if (isMobile) {
+    return null;
+  }
+
   const icon = isPubliclyShared ? <GlobeIcon /> : undefined;
 
   return (