cleanup

app/components/Sharing/Collection/AccessControlList.tsx

@@ -1,13 +1,15 @@
-import { observer } from "mobx-react";
-import { GroupIcon } from "outline-icons";
+import { GroupIcon, UserIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { useTheme } from "styled-components";
+import styled, { useTheme } from "styled-components";
 import Squircle from "@shared/components/Squircle";
 import { CollectionPermission } from "@shared/types";
 import Collection from "~/models/Collection";
 import Avatar, { AvatarSize } from "~/components/Avatar/Avatar";
 import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
+import InputSelectPermission from "~/components/InputSelectPermission";
+import Scrollable from "~/components/Scrollable";
+import useMaxHeight from "~/hooks/useMaxHeight";
 import usePolicy from "~/hooks/usePolicy";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
@@ -23,32 +25,43 @@ type Props = {
   invitedInSession: string[];
 };
 
-function CollectionMemberList({ collection, invitedInSession }: Props) {
+export function AccessControlList({ collection, invitedInSession }: Props) {
   const { memberships, groupMemberships } = useStores();
   const can = usePolicy(collection);
   const { t } = useTranslation();
   const theme = useTheme();
   const collectionId = collection.id;
 
-  const { request: fetchMemberships } = useRequest(
+  const { request: fetchMemberships, data: membershipData } = useRequest(
     React.useCallback(
       () => memberships.fetchAll({ id: collectionId }),
       [memberships, collectionId]
     )
   );
 
-  const { request: fetchGroupMemberships } = useRequest(
-    React.useCallback(
-      () => groupMemberships.fetchAll({ id: collectionId }),
-      [groupMemberships, collectionId]
-    )
-  );
+  const { request: fetchGroupMemberships, data: groupMembershipData } =
+    useRequest(
+      React.useCallback(
+        () => groupMemberships.fetchAll({ id: collectionId }),
+        [groupMemberships, collectionId]
+      )
+    );
 
   React.useEffect(() => {
     void fetchMemberships();
     void fetchGroupMemberships();
   }, [fetchMemberships, fetchGroupMemberships]);
 
+  const containerRef = React.useRef<HTMLDivElement | null>(null);
+  const { maxHeight, calcMaxHeight } = useMaxHeight({
+    elementRef: containerRef,
+    maxViewportPercentage: 70,
+  });
+
+  React.useEffect(() => {
+    calcMaxHeight();
+  });
+
   const permissions = React.useMemo(
     () =>
       [
@@ -73,8 +86,43 @@ function CollectionMemberList({ collection, invitedInSession }: Props) {
     [t]
   );
 
+  if (!membershipData || !groupMembershipData) {
+    return null;
+  }
+
   return (
-    <>
+    <ScrollableContainer
+      ref={containerRef}
+      hiddenScrollbars
+      style={{ maxHeight }}
+    >
+      <ListItem
+        image={
+          <Squircle color={theme.accent} size={AvatarSize.Medium}>
+            <UserIcon color={theme.accentText} size={16} />
+          </Squircle>
+        }
+        title={t("All members")}
+        subtitle={t("Everyone in the workspace")}
+        actions={
+          <div style={{ marginRight: -8 }}>
+            <InputSelectPermission
+              style={{ margin: 0 }}
+              onChange={(
+                value: CollectionPermission | typeof EmptySelectValue
+              ) => {
+                void collection.save({
+                  permission: value === EmptySelectValue ? null : value,
+                });
+              }}
+              disabled={!can.update}
+              value={collection?.permission}
+              labelHidden
+              nude
+            />
+          </div>
+        }
+      />
       {groupMemberships
         .inCollection(collection.id)
         .sort((a, b) =>
@@ -173,8 +221,11 @@ function CollectionMemberList({ collection, invitedInSession }: Props) {
             }
           />
         ))}
-    </>
+    </ScrollableContainer>
   );
 }
 
-export default observer(CollectionMemberList);
+const ScrollableContainer = styled(Scrollable)`
+  padding: 12px 24px;
+  margin: -12px -24px;
+`;

app/components/Sharing/Collection/SharePopover.tsx

@@ -1,18 +1,15 @@
 import { isEmail } from "class-validator";
 import { m } from "framer-motion";
 import { observer } from "mobx-react";
-import { BackIcon, UserIcon } from "outline-icons";
+import { BackIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { useTheme } from "styled-components";
-import Squircle from "@shared/components/Squircle";
 import { CollectionPermission } from "@shared/types";
 import Collection from "~/models/Collection";
 import Group from "~/models/Group";
 import User from "~/models/User";
 import Avatar, { AvatarSize } from "~/components/Avatar/Avatar";
-import InputSelectPermission from "~/components/InputSelectPermission";
 import NudeButton from "~/components/NudeButton";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";
@@ -22,15 +19,14 @@ import useKeyDown from "~/hooks/useKeyDown";
 import usePolicy from "~/hooks/usePolicy";
 import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
-import { EmptySelectValue, Permission } from "~/types";
+import { Permission } from "~/types";
 import { collectionPath, urlify } from "~/utils/routeHelpers";
 import { Wrapper, presence } from "../components";
 import { CopyLinkButton } from "../components/CopyLinkButton";
-import { ListItem } from "../components/ListItem";
 import { PermissionAction } from "../components/PermissionAction";
 import { SearchInput } from "../components/SearchInput";
 import { Suggestions } from "../components/Suggestions";
-import CollectionMemberList from "./CollectionMemberList";
+import { AccessControlList } from "./AccessControlList";
 
 type Props = {
   /** The collection to share. */
@@ -42,7 +38,6 @@ type Props = {
 };
 
 function SharePopover({ collection, visible, onRequestClose }: Props) {
-  const theme = useTheme();
   const team = useCurrentTeam();
   const { groupMemberships, users, groups, memberships } = useStores();
   const { t } = useTranslation();
@@ -367,35 +362,7 @@ function SharePopover({ collection, visible, onRequestClose }: Props) {
       )}
 
       <div style={{ display: picker ? "none" : "block" }}>
-        <ListItem
-          image={
-            <Squircle color={theme.accent} size={AvatarSize.Medium}>
-              <UserIcon color={theme.accentText} size={16} />
-            </Squircle>
-          }
-          title={t("All members")}
-          subtitle={t("Everyone in the workspace")}
-          actions={
-            <div style={{ marginRight: -8 }}>
-              <InputSelectPermission
-                style={{ margin: 0 }}
-                onChange={(
-                  value: CollectionPermission | typeof EmptySelectValue
-                ) => {
-                  void collection.save({
-                    permission: value === EmptySelectValue ? null : value,
-                  });
-                }}
-                disabled={!can.update}
-                value={collection?.permission}
-                labelHidden
-                nude
-              />
-            </div>
-          }
-        />
-
-        <CollectionMemberList
+        <AccessControlList
           collection={collection}
           invitedInSession={invitedInSession}
         />

app/components/Sharing/Document/AccessControlList.tsx

@@ -0,0 +1,266 @@
+import { observer } from "mobx-react";
+import { MoreIcon, QuestionMarkIcon, UserIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled, { useTheme } from "styled-components";
+import Squircle from "@shared/components/Squircle";
+import { Pagination } from "@shared/constants";
+import { CollectionPermission, IconType } from "@shared/types";
+import { determineIconType } from "@shared/utils/icon";
+import type Collection from "~/models/Collection";
+import type Document from "~/models/Document";
+import Share from "~/models/Share";
+import Flex from "~/components/Flex";
+import LoadingIndicator from "~/components/LoadingIndicator";
+import Scrollable from "~/components/Scrollable";
+import Text from "~/components/Text";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import useMaxHeight from "~/hooks/useMaxHeight";
+import usePolicy from "~/hooks/usePolicy";
+import useRequest from "~/hooks/useRequest";
+import useStores from "~/hooks/useStores";
+import Avatar from "../../Avatar";
+import { AvatarSize } from "../../Avatar/Avatar";
+import CollectionIcon from "../../Icons/CollectionIcon";
+import Tooltip from "../../Tooltip";
+import { Separator } from "../components";
+import { ListItem } from "../components/ListItem";
+import DocumentMemberList from "./DocumentMemberList";
+import PublicAccess from "./PublicAccess";
+
+type Props = {
+  /** The document being shared. */
+  document: Document;
+  /** List of users that have been invited during the current editing session */
+  invitedInSession: string[];
+  /** The existing share model, if any. */
+  share: Share | null | undefined;
+  /** The existing share parent model, if any. */
+  sharedParent: Share | null | undefined;
+  /** Callback fired when the popover requests to be closed. */
+  onRequestClose: () => void;
+  /** Whether the popover is visible. */
+  visible: boolean;
+};
+
+export const AccessControlList = observer(
+  ({
+    document,
+    invitedInSession,
+    share,
+    sharedParent,
+    onRequestClose,
+    visible,
+  }: Props) => {
+    const { t } = useTranslation();
+    const theme = useTheme();
+    const collection = document.collection;
+    const usersInCollection = useUsersInCollection(collection);
+    const user = useCurrentUser();
+    const { userMemberships } = useStores();
+    const collectionSharingDisabled = document.collection?.sharing === false;
+    const team = useCurrentTeam();
+    const can = usePolicy(document);
+
+    const containerRef = React.useRef<HTMLDivElement | null>(null);
+    const { maxHeight, calcMaxHeight } = useMaxHeight({
+      elementRef: containerRef,
+      maxViewportPercentage: 70,
+      margin: 24,
+    });
+
+    const {
+      loading: loadingDocumentMembers,
+      request: fetchDocumentMembers,
+      data,
+    } = useRequest(
+      React.useCallback(
+        () =>
+          userMemberships.fetchDocumentMemberships({
+            id: document.id,
+            limit: Pagination.defaultLimit,
+          }),
+        [userMemberships, document.id]
+      )
+    );
+
+    React.useEffect(() => {
+      void fetchDocumentMembers();
+    }, [fetchDocumentMembers]);
+
+    React.useEffect(() => {
+      calcMaxHeight();
+    });
+
+    if (loadingDocumentMembers) {
+      return <LoadingIndicator />;
+    }
+
+    if (!data) {
+      return null;
+    }
+
+    return (
+      <ScrollableContainer
+        ref={containerRef}
+        hiddenScrollbars
+        style={{ maxHeight }}
+      >
+        {collection ? (
+          <>
+            {collection.permission ? (
+              <ListItem
+                image={
+                  <Squircle color={theme.accent} size={AvatarSize.Medium}>
+                    <UserIcon color={theme.accentText} size={16} />
+                  </Squircle>
+                }
+                title={t("All members")}
+                subtitle={t("Everyone in the workspace")}
+                actions={
+                  <AccessTooltip>
+                    {collection?.permission === CollectionPermission.ReadWrite
+                      ? t("Can edit")
+                      : t("Can view")}
+                  </AccessTooltip>
+                }
+              />
+            ) : usersInCollection ? (
+              <ListItem
+                image={<CollectionSquircle collection={collection} />}
+                title={collection.name}
+                subtitle={t("Everyone in the collection")}
+                actions={<AccessTooltip>{t("Can view")}</AccessTooltip>}
+              />
+            ) : (
+              <ListItem
+                image={<Avatar model={user} showBorder={false} />}
+                title={user.name}
+                subtitle={t("You have full access")}
+                actions={<AccessTooltip>{t("Can edit")}</AccessTooltip>}
+              />
+            )}
+            <DocumentMemberList
+              document={document}
+              invitedInSession={invitedInSession}
+            />
+          </>
+        ) : document.isDraft ? (
+          <>
+            <ListItem
+              image={<Avatar model={document.createdBy} showBorder={false} />}
+              title={document.createdBy?.name}
+              actions={
+                <AccessTooltip content={t("Created the document")}>
+                  {t("Can edit")}
+                </AccessTooltip>
+              }
+            />
+            <DocumentMemberList
+              document={document}
+              invitedInSession={invitedInSession}
+            />
+          </>
+        ) : (
+          <>
+            <DocumentMemberList
+              document={document}
+              invitedInSession={invitedInSession}
+            />
+            <ListItem
+              image={
+                <Squircle color={theme.accent} size={AvatarSize.Medium}>
+                  <MoreIcon color={theme.accentText} size={16} />
+                </Squircle>
+              }
+              title={t("Other people")}
+              subtitle={t("Other workspace members may have access")}
+              actions={
+                <AccessTooltip
+                  content={t(
+                    "This document may be shared with more workspace members through a parent document or collection you do not have access to"
+                  )}
+                />
+              }
+            />
+          </>
+        )}
+        {team.sharing && can.share && !collectionSharingDisabled && visible && (
+          <>
+            {document.members.length ? <Separator /> : null}
+            <PublicAccess
+              document={document}
+              share={share}
+              sharedParent={sharedParent}
+              onRequestClose={onRequestClose}
+            />
+          </>
+        )}
+      </ScrollableContainer>
+    );
+  }
+);
+
+const AccessTooltip = ({
+  children,
+  content,
+}: {
+  children?: React.ReactNode;
+  content?: string;
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Flex align="center" gap={2}>
+      <Text type="secondary" size="small">
+        {children}
+      </Text>
+      <Tooltip content={content ?? t("Access inherited from collection")}>
+        <QuestionMarkIcon size={18} />
+      </Tooltip>
+    </Flex>
+  );
+};
+
+const CollectionSquircle = ({ collection }: { collection: Collection }) => {
+  const theme = useTheme();
+  const iconType = determineIconType(collection.icon)!;
+  const squircleColor =
+    iconType === IconType.SVG ? collection.color! : theme.slateLight;
+  const iconSize = iconType === IconType.SVG ? 16 : 22;
+
+  return (
+    <Squircle color={squircleColor} size={AvatarSize.Medium}>
+      <CollectionIcon
+        collection={collection}
+        color={theme.white}
+        size={iconSize}
+      />
+    </Squircle>
+  );
+};
+
+function useUsersInCollection(collection?: Collection) {
+  const { users, memberships } = useStores();
+  const { request } = useRequest(() =>
+    memberships.fetchPage({ limit: 1, id: collection!.id })
+  );
+
+  React.useEffect(() => {
+    if (collection && !collection.permission) {
+      void request();
+    }
+  }, [collection]);
+
+  return collection
+    ? collection.permission
+      ? true
+      : users.inCollection(collection.id).length > 1
+    : false;
+}
+
+const ScrollableContainer = styled(Scrollable)`
+  padding: 12px 24px;
+  margin: -12px -24px;
+`;

app/components/Sharing/Document/DocumentMemberList.tsx

@@ -4,13 +4,10 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { toast } from "sonner";
-import { Pagination } from "@shared/constants";
 import Document from "~/models/Document";
 import UserMembership from "~/models/UserMembership";
-import LoadingIndicator from "~/components/LoadingIndicator";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
-import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import { homePath } from "~/utils/routeHelpers";
 import MemberListItem from "./DocumentMemberListItem";
@@ -26,27 +23,12 @@ type Props = {
 
 function DocumentMembersList({ document, invitedInSession }: Props) {
   const { userMemberships } = useStores();
+
   const user = useCurrentUser();
   const history = useHistory();
   const can = usePolicy(document);
   const { t } = useTranslation();
 
-  const { loading: loadingDocumentMembers, request: fetchDocumentMembers } =
-    useRequest(
-      React.useCallback(
-        () =>
-          userMemberships.fetchDocumentMemberships({
-            id: document.id,
-            limit: Pagination.defaultLimit,
-          }),
-        [userMemberships, document.id]
-      )
-    );
-
-  React.useEffect(() => {
-    void fetchDocumentMembers();
-  }, [fetchDocumentMembers]);
-
   const handleRemoveUser = React.useCallback(
     async (item) => {
       try {
@@ -105,10 +87,6 @@ function DocumentMembersList({ document, invitedInSession }: Props) {
     [document.members, invitedInSession]
   );
 
-  if (loadingDocumentMembers) {
-    return <LoadingIndicator />;
-  }
-
   return (
     <>
       {members.map((item) => (

app/components/Sharing/Document/OtherAccess.tsx

@@ -1,167 +0,0 @@
-import { observer } from "mobx-react";
-import { MoreIcon, QuestionMarkIcon, UserIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useTheme } from "styled-components";
-import Squircle from "@shared/components/Squircle";
-import { CollectionPermission, IconType } from "@shared/types";
-import { determineIconType } from "@shared/utils/icon";
-import type Collection from "~/models/Collection";
-import type Document from "~/models/Document";
-import Flex from "~/components/Flex";
-import Text from "~/components/Text";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import useRequest from "~/hooks/useRequest";
-import useStores from "~/hooks/useStores";
-import Avatar from "../../Avatar";
-import { AvatarSize } from "../../Avatar/Avatar";
-import CollectionIcon from "../../Icons/CollectionIcon";
-import Tooltip from "../../Tooltip";
-import { ListItem } from "../components/ListItem";
-
-type Props = {
-  /** The document being shared. */
-  document: Document;
-  children: React.ReactNode;
-};
-
-export const OtherAccess = observer(({ document, children }: Props) => {
-  const { t } = useTranslation();
-  const theme = useTheme();
-  const collection = document.collection;
-  const usersInCollection = useUsersInCollection(collection);
-  const user = useCurrentUser();
-
-  return (
-    <>
-      {collection ? (
-        <>
-          {collection.permission ? (
-            <ListItem
-              image={
-                <Squircle color={theme.accent} size={AvatarSize.Medium}>
-                  <UserIcon color={theme.accentText} size={16} />
-                </Squircle>
-              }
-              title={t("All members")}
-              subtitle={t("Everyone in the workspace")}
-              actions={
-                <AccessTooltip>
-                  {collection?.permission === CollectionPermission.ReadWrite
-                    ? t("Can edit")
-                    : t("Can view")}
-                </AccessTooltip>
-              }
-            />
-          ) : usersInCollection ? (
-            <ListItem
-              image={<CollectionSquircle collection={collection} />}
-              title={collection.name}
-              subtitle={t("Everyone in the collection")}
-              actions={<AccessTooltip>{t("Can view")}</AccessTooltip>}
-            />
-          ) : (
-            <ListItem
-              image={<Avatar model={user} showBorder={false} />}
-              title={user.name}
-              subtitle={t("You have full access")}
-              actions={<AccessTooltip>{t("Can edit")}</AccessTooltip>}
-            />
-          )}
-          {children}
-        </>
-      ) : document.isDraft ? (
-        <>
-          <ListItem
-            image={<Avatar model={document.createdBy} showBorder={false} />}
-            title={document.createdBy?.name}
-            actions={
-              <AccessTooltip content={t("Created the document")}>
-                {t("Can edit")}
-              </AccessTooltip>
-            }
-          />
-          {children}
-        </>
-      ) : (
-        <>
-          {children}
-          <ListItem
-            image={
-              <Squircle color={theme.accent} size={AvatarSize.Medium}>
-                <MoreIcon color={theme.accentText} size={16} />
-              </Squircle>
-            }
-            title={t("Other people")}
-            subtitle={t("Other workspace members may have access")}
-            actions={
-              <AccessTooltip
-                content={t(
-                  "This document may be shared with more workspace members through a parent document or collection you do not have access to"
-                )}
-              />
-            }
-          />
-        </>
-      )}
-    </>
-  );
-});
-
-const AccessTooltip = ({
-  children,
-  content,
-}: {
-  children?: React.ReactNode;
-  content?: string;
-}) => {
-  const { t } = useTranslation();
-
-  return (
-    <Flex align="center" gap={2}>
-      <Text type="secondary" size="small">
-        {children}
-      </Text>
-      <Tooltip content={content ?? t("Access inherited from collection")}>
-        <QuestionMarkIcon size={18} />
-      </Tooltip>
-    </Flex>
-  );
-};
-
-const CollectionSquircle = ({ collection }: { collection: Collection }) => {
-  const theme = useTheme();
-  const iconType = determineIconType(collection.icon)!;
-  const squircleColor =
-    iconType === IconType.SVG ? collection.color! : theme.slateLight;
-  const iconSize = iconType === IconType.SVG ? 16 : 22;
-
-  return (
-    <Squircle color={squircleColor} size={AvatarSize.Medium}>
-      <CollectionIcon
-        collection={collection}
-        color={theme.white}
-        size={iconSize}
-      />
-    </Squircle>
-  );
-};
-
-function useUsersInCollection(collection?: Collection) {
-  const { users, memberships } = useStores();
-  const { request } = useRequest(() =>
-    memberships.fetchPage({ limit: 1, id: collection!.id })
-  );
-
-  React.useEffect(() => {
-    if (collection && !collection.permission) {
-      void request();
-    }
-  }, [collection]);
-
-  return collection
-    ? collection.permission
-      ? true
-      : users.inCollection(collection.id).length > 1
-    : false;
-}

app/components/Sharing/Document/SharePopover.tsx

@@ -22,14 +22,12 @@ import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
 import { Permission } from "~/types";
 import { documentPath, urlify } from "~/utils/routeHelpers";
-import { Separator, Wrapper, presence } from "../components";
+import { Wrapper, presence } from "../components";
 import { CopyLinkButton } from "../components/CopyLinkButton";
 import { PermissionAction } from "../components/PermissionAction";
 import { SearchInput } from "../components/SearchInput";
 import { Suggestions } from "../components/Suggestions";
-import DocumentMembersList from "./DocumentMemberList";
-import { OtherAccess } from "./OtherAccess";
-import PublicAccess from "./PublicAccess";
+import { AccessControlList } from "./AccessControlList";
 
 type Props = {
   /** The document to share. */
@@ -60,7 +58,6 @@ function SharePopover({
   const [picker, showPicker, hidePicker] = useBoolean();
   const [invitedInSession, setInvitedInSession] = React.useState<string[]>([]);
   const [pendingIds, setPendingIds] = React.useState<string[]>([]);
-  const collectionSharingDisabled = document.collection?.sharing === false;
   const [permission, setPermission] = React.useState<DocumentPermission>(
     DocumentPermission.Read
   );
@@ -341,24 +338,14 @@ function SharePopover({
       )}
 
       <div style={{ display: picker ? "none" : "block" }}>
-        <OtherAccess document={document}>
-          <DocumentMembersList
-            document={document}
-            invitedInSession={invitedInSession}
-          />
-        </OtherAccess>
-
-        {team.sharing && can.share && !collectionSharingDisabled && visible && (
-          <>
-            {document.members.length ? <Separator /> : null}
-            <PublicAccess
-              document={document}
-              share={share}
-              sharedParent={sharedParent}
-              onRequestClose={onRequestClose}
-            />
-          </>
-        )}
+        <AccessControlList
+          document={document}
+          invitedInSession={invitedInSession}
+          share={share}
+          sharedParent={sharedParent}
+          visible={visible}
+          onRequestClose={onRequestClose}
+        />
       </div>
     </Wrapper>
   );

app/components/Sharing/components/Suggestions.tsx

@@ -68,7 +68,7 @@ export const Suggestions = observer(
     const user = useCurrentUser();
     const theme = useTheme();
     const containerRef = React.useRef<HTMLDivElement | null>(null);
-    const maxHeight = useMaxHeight({
+    const { maxHeight } = useMaxHeight({
       elementRef: containerRef,
       maxViewportPercentage: 70,
     });

app/hooks/useMaxHeight.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import useMobile from "./useMobile";
 import useWindowSize from "./useWindowSize";
 
 const useMaxHeight = ({
@@ -15,12 +14,11 @@ const useMaxHeight = ({
   margin?: number;
 }) => {
   const [maxHeight, setMaxHeight] = React.useState<number | undefined>(10);
-  const isMobile = useMobile();
   const { height: windowHeight } = useWindowSize();
 
-  React.useLayoutEffect(() => {
-    if (!isMobile && elementRef?.current) {
-      const mxHeight = (windowHeight / 100) * maxViewportPercentage;
+  const calcMaxHeight = React.useCallback(() => {
+    if (elementRef?.current) {
+      const mxHeight = (windowHeight / 100) * maxViewportPercentage - margin;
 
       setMaxHeight(
         Math.min(
@@ -35,9 +33,11 @@ const useMaxHeight = ({
     } else {
       setMaxHeight(0);
     }
-  }, [elementRef, windowHeight, margin, isMobile, maxViewportPercentage]);
+  }, [elementRef, windowHeight, margin, maxViewportPercentage]);
 
-  return maxHeight;
+  React.useLayoutEffect(calcMaxHeight, [calcMaxHeight]);
+
+  return { maxHeight, calcMaxHeight };
 };
 
 export default useMaxHeight;

shared/i18n/locales/en_US/translation.json

@@ -284,28 +284,20 @@
   "Results": "Results",
   "No results for {{query}}": "No results for {{query}}",
   "Manage": "Manage",
+  "All members": "All members",
+  "Everyone in the workspace": "Everyone in the workspace",
   "Invite": "Invite",
   "{{ userName }} was added to the collection": "{{ userName }} was added to the collection",
   "{{ count }} people added to the collection": "{{ count }} people added to the collection",
   "{{ count }} people added to the collection_plural": "{{ count }} people added to the collection",
   "{{ count }} people and {{ count2 }} groups added to the collection": "{{ count }} people and {{ count2 }} groups added to the collection",
   "{{ count }} people and {{ count2 }} groups added to the collection_plural": "{{ count }} people and {{ count2 }} groups added to the collection",
-  "All members": "All members",
-  "Everyone in the workspace": "Everyone in the workspace",
   "Add": "Add",
   "Add or invite": "Add or invite",
   "Viewer": "Viewer",
   "Editor": "Editor",
   "Suggestions for invitation": "Suggestions for invitation",
   "No matches": "No matches",
-  "{{ userName }} was removed from the document": "{{ userName }} was removed from the document",
-  "Could not remove user": "Could not remove user",
-  "Permissions for {{ userName }} updated": "Permissions for {{ userName }} updated",
-  "Could not update user": "Could not update user",
-  "Has access through <2>parent</2>": "Has access through <2>parent</2>",
-  "Suspended": "Suspended",
-  "Invited": "Invited",
-  "Leave": "Leave",
   "Can view": "Can view",
   "Everyone in the collection": "Everyone in the collection",
   "You have full access": "You have full access",
@@ -314,6 +306,14 @@
   "Other workspace members may have access": "Other workspace members may have access",
   "This document may be shared with more workspace members through a parent document or collection you do not have access to": "This document may be shared with more workspace members through a parent document or collection you do not have access to",
   "Access inherited from collection": "Access inherited from collection",
+  "{{ userName }} was removed from the document": "{{ userName }} was removed from the document",
+  "Could not remove user": "Could not remove user",
+  "Permissions for {{ userName }} updated": "Permissions for {{ userName }} updated",
+  "Could not update user": "Could not update user",
+  "Has access through <2>parent</2>": "Has access through <2>parent</2>",
+  "Suspended": "Suspended",
+  "Invited": "Invited",
+  "Leave": "Leave",
   "Only lowercase letters, digits and dashes allowed": "Only lowercase letters, digits and dashes allowed",
   "Sorry, this link has already been used": "Sorry, this link has already been used",
   "Public link copied to clipboard": "Public link copied to clipboard",