diff --git a/web/components/tabs.css b/web/components/tabs.css
index 55e02e439..4671c931b 100644
--- a/web/components/tabs.css
+++ b/web/components/tabs.css
@@ -1,29 +1,30 @@
div.tabsContainer {
color: var(--fg);
display: flex;
flex-direction: column;
overflow: hidden;
+ max-height: 100%;
}
div.tabsHeaderContainer {
display: flex;
}
div.tabHeader {
flex: 1;
padding: 16px;
display: flex;
justify-content: center;
color: var(--tabs-header-active-color);
border-bottom: 2px solid var(--tabs-header-active-border);
}
div.backgroundTabHeader {
cursor: pointer;
color: var(--tabs-header-background-color);
border-bottom-color: var(--tabs-header-background-border);
}
div.backgroundTabHeader:hover {
color: var(--tabs-header-background-color-hover);
border-bottom-color: var(--tabs-header-background-border-hover);
}
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
index 50a715934..c6887d995 100644
--- a/web/modals/threads/members/members-modal.css
+++ b/web/modals/threads/members/members-modal.css
@@ -1,46 +1,51 @@
+div.modalContentContainer {
+ width: 383px;
+ height: 617px;
+}
+
div.membersList {
overflow: auto;
padding: 8px 0;
color: var(--members-modal-member-text);
}
div.noScroll {
overflow: hidden;
}
div.memberContainer {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 8px 16px;
}
div.memberContainer:hover {
color: var(--members-modal-member-text-hover);
}
div.memberContainerWithMenuOpen {
color: var(--members-modal-member-text-hover);
}
div.memberInfo {
font-size: var(--l-font-18);
display: flex;
align-items: center;
gap: 10px;
}
div.memberAction {
position: relative;
}
h5.memberletterHeader {
margin: 16px;
color: var(--members-modal-member-text);
font-size: var(--s-font-14);
}
div.noUsers {
padding-top: 16px;
text-align: center;
}
diff --git a/web/modals/threads/members/members-modal.react.js b/web/modals/threads/members/members-modal.react.js
index 8064cfd86..0be54a27f 100644
--- a/web/modals/threads/members/members-modal.react.js
+++ b/web/modals/threads/members/members-modal.react.js
@@ -1,102 +1,106 @@
// @flow
import * as React from 'react';
import { threadInfoSelector } from 'lib/selectors/thread-selectors';
import { userStoreSearchIndex } from 'lib/selectors/user-selectors';
import { memberHasAdminPowers, memberIsAdmin } from 'lib/shared/thread-utils';
import { type RelativeMemberInfo } from 'lib/types/thread-types';
import Tabs from '../../../components/tabs.react';
import { useSelector } from '../../../redux/redux-utils';
import SearchModal from '../../search-modal.react';
import ThreadMembersList from './members-list.react';
+import css from './members-modal.css';
type ContentProps = {
+searchText: string,
+threadID: string,
};
function ThreadMembersModalContent(props: ContentProps): React.Node {
const { threadID, searchText } = props;
const [tab, setTab] = React.useState<'All Members' | 'Admins'>('All Members');
const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
const { members: threadMembersNotFiltered } = threadInfo;
const userSearchIndex = useSelector(userStoreSearchIndex);
const userIDs = React.useMemo(
() => userSearchIndex.getSearchResults(searchText),
[searchText, userSearchIndex],
);
const allMembers = React.useMemo(
() =>
threadMembersNotFiltered.filter(
(member: RelativeMemberInfo) =>
searchText.length === 0 || userIDs.includes(member.id),
),
[searchText.length, threadMembersNotFiltered, userIDs],
);
const adminMembers = React.useMemo(
() =>
allMembers.filter(
(member: RelativeMemberInfo) =>
memberIsAdmin(member, threadInfo) || memberHasAdminPowers(member),
),
[allMembers, threadInfo],
);
const allUsersTab = React.useMemo(
() => (