diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css --- a/web/modals/threads/members/members-modal.css +++ b/web/modals/threads/members/members-modal.css @@ -1,5 +1,5 @@ div.modalContentContainer { - height: 617px; + height: 60vh; overflow: hidden; display: flex; flex-direction: column; diff --git a/web/modals/threads/members/members-modal.react.js b/web/modals/threads/members/members-modal.react.js --- a/web/modals/threads/members/members-modal.react.js +++ b/web/modals/threads/members/members-modal.react.js @@ -87,39 +87,14 @@ ); }, [adminMembers, allMembers, tab, threadInfo]); - const { pushModal, popModal } = useModalContext(); - - const onClickAddMembers = React.useCallback(() => { - pushModal(); - }, [popModal, pushModal, threadID]); - - const canAddMembers = threadHasPermission( - threadInfo, - threadPermissions.ADD_MEMBERS, - ); - - const addMembersButton = React.useMemo(() => { - if (!canAddMembers) { - return null; - } - return ( -
- -
- ); - }, [canAddMembers, onClickAddMembers]); - const threadMembersModalContent = React.useMemo( () => (
{tabs}
{tabContent}
- {addMembersButton}
), - [addMembersButton, tabContent, tabs], + [tabContent, tabs], ); return threadMembersModalContent; @@ -137,12 +112,40 @@ ), [threadID], ); + + const { pushModal, popModal } = useModalContext(); + + const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]); + + const onClickAddMembers = React.useCallback(() => { + pushModal(); + }, [popModal, pushModal, threadID]); + + const canAddMembers = threadHasPermission( + threadInfo, + threadPermissions.ADD_MEMBERS, + ); + + const addMembersButton = React.useMemo(() => { + if (!canAddMembers) { + return null; + } + return ( +
+ +
+ ); + }, [canAddMembers, onClickAddMembers]); + return ( {renderModalContent}