diff --git a/src/cloud/components/organisms/settings/MembersTab.tsx b/src/cloud/components/organisms/settings/MembersTab.tsx
index ae1b92d6fb..eac38b2073 100644
--- a/src/cloud/components/organisms/settings/MembersTab.tsx
+++ b/src/cloud/components/organisms/settings/MembersTab.tsx
@@ -47,6 +47,7 @@ import { SerializedGuest } from '../../../interfaces/db/guest'
import EmojiIcon from '../../atoms/EmojiIcon'
import { getDocTitle } from '../../../lib/utils/patterns'
import SettingsTeamForm from '../../molecules/SettingsTeamForm'
+import { guestsPerMember } from '../../../lib/subscription'
const MembersTab = () => {
const { t } = useTranslation()
@@ -625,6 +626,18 @@ const MembersTab = () => {
)}
+
+ Guests are people external to your team who you want to work
+ with on specific documents. They can be invited to
+ individual documents but not an entire workspace.
+
+
+ {permissions.length > 0
+ ? `${
+ permissions.length * guestsPerMember - guestsMap.size
+ } remaining ${plur('seat', permissions.length)}. `
+ : 'No Remaining seats. '}
+
User |
@@ -708,6 +721,7 @@ const TopMargin = styled.div`
const StyledMembersTable = styled.table`
width: 100%;
+ margin-top: ${({ theme }) => theme.space.default}px;
.table-header {
text-align: left;
@@ -765,7 +779,6 @@ const StyledMembersTable = styled.table`
const StyledGuestInactiveText = styled.p`
margin-top: ${({ theme }) => theme.space.medium}px;
margin-bottom: ${({ theme }) => theme.space.default}px;
- line-height: 1.6;
`
export default MembersTab
diff --git a/src/cloud/components/organisms/settings/styled.ts b/src/cloud/components/organisms/settings/styled.ts
index c8cea2098a..e99dd590d8 100644
--- a/src/cloud/components/organisms/settings/styled.ts
+++ b/src/cloud/components/organisms/settings/styled.ts
@@ -370,6 +370,7 @@ export const SectionDescription = styled.small`
color: ${({ theme }) => theme.subtleTextColor};
display: block;
margin-bottom: ${({ theme }) => theme.space.xsmall}px;
+ line-height: 1.6;
`
export const SectionFlexLeft = styled.div`