diff --git a/client/views/admin/permissions/UsersInRole.js b/client/views/admin/permissions/UsersInRole.js
index 3bd1aeb83bc11..55a792d19afc2 100644
--- a/client/views/admin/permissions/UsersInRole.js
+++ b/client/views/admin/permissions/UsersInRole.js
@@ -1,5 +1,5 @@
 import React, { useState, useRef } from 'react';
-import { Box, Field, Margins, ButtonGroup, Button, Callout } from '@rocket.chat/fuselage';
+import { Box, Field, Margins, ButtonGroup, Button, Callout, Flex } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
 import Page from '../../../components/Page';
@@ -67,21 +67,23 @@ const UsersInRolePage = ({ data }) => {
 		<Page.Content>
 			<Box display='flex' flexDirection='row' w='full' mi='neg-x4'>
 				<Margins inline='x4'>
-					{data.scope !== 'Users' && <Field>
-						<Field.Label>{t('Choose_a_room')}</Field.Label>
-						<Field.Row>
-							<RoomAutoComplete value={rid} onChange={setRid} placeholder={t('User')}/>
-						</Field.Row>
-					</Field>}
-					<Field>
-						<Field.Label>{t('Add_user')}</Field.Label>
-						<Field.Row>
-							<UserAutoComplete value={user} onChange={setUser} placeholder={t('User')}/>
-						</Field.Row>
-					</Field>
-					<Box display='flex' flexGrow={1} flexDirection='column' justifyContent='flex-end'>
-						<Button primary onClick={handleAdd}>{t('Add')}</Button>
-					</Box>
+					<Flex.Item shrink={1}>
+						{data.scope !== 'Users' && <Field>
+							<Field.Label>{t('Choose_a_room')}</Field.Label>
+							<Field.Row>
+								<RoomAutoComplete value={rid} onChange={setRid} placeholder={t('User')}/>
+							</Field.Row>
+						</Field>}
+						<Field>
+							<Field.Label>{t('Add_user')}</Field.Label>
+							<Field.Row>
+								<UserAutoComplete value={user} onChange={setUser} placeholder={t('User')}/>
+							</Field.Row>
+						</Field>
+						<Box display='flex' flexGrow={1} flexDirection='column' justifyContent='flex-end'>
+							<Button primary onClick={handleAdd}>{t('Add')}</Button>
+						</Box>
+					</Flex.Item>
 				</Margins>
 			</Box>
 			<Margins blockStart='x8'>
diff --git a/client/views/admin/permissions/UsersInRoleTable.js b/client/views/admin/permissions/UsersInRoleTable.js
index c28ac772d4ee5..a5566521a13a2 100644
--- a/client/views/admin/permissions/UsersInRoleTable.js
+++ b/client/views/admin/permissions/UsersInRoleTable.js
@@ -2,6 +2,7 @@ import React, { useState, useMemo } from 'react';
 import { Box, Table, Button, Icon } from '@rocket.chat/fuselage';
 import { useMutableCallback, useDebouncedValue } from '@rocket.chat/fuselage-hooks';
 
+import { getUserEmailAddress } from '../../../lib/getUserEmailAddress';
 import UserAvatar from '../../../components/avatar/UserAvatar';
 import DeleteWarningModal from '../../../components/DeleteWarningModal';
 import { useMethod } from '../../../contexts/ServerContext';
@@ -13,7 +14,7 @@ import { useEndpointData } from '../../../hooks/useEndpointData';
 
 
 const UserRow = React.memo(({ _id, username, name, avatarETag, emails, onRemove }) => {
-	const email = emails?.find(({ address }) => !!address).address;
+	const email = getUserEmailAddress({ emails });
 
 	const handleRemove = useMutableCallback(() => {
 		onRemove(username);
diff --git a/ee/client/audit/AuditPage.js b/ee/client/audit/AuditPage.js
index ea27c2aebd4df..b03026d8efffd 100644
--- a/ee/client/audit/AuditPage.js
+++ b/ee/client/audit/AuditPage.js
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { Box, Field, TextInput, ButtonGroup, Button, Margins, Tabs } from '@rocket.chat/fuselage';
+import { Box, Field, TextInput, ButtonGroup, Button, Margins, Tabs, Flex } from '@rocket.chat/fuselage';
 import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
 
 import Page from '../../../client/components/Page';
@@ -127,75 +127,79 @@ const AuditPage = () => {
 		</Tabs>
 		<Page.ScrollableContentWithShadow mb='neg-x4'>
 			<Margins block='x4'>
-				<Box display='flex' flexDirection='row' mi='neg-x4'>
+				<Box display='flex' flexDirection='row' mi='neg-x4' justifyContent='stretch'>
 					<Margins inline='x4'>
-						<Field>
-							<Field.Label>{t('Message')}</Field.Label>
-							<Field.Row>
-								<TextInput value={msg} onChange={handleMsg} placeholder={t('Search')}/>
-							</Field.Row>
-						</Field>
-						<Field>
-							<Field.Label>{t('Date')}</Field.Label>
-							<Field.Row>
-								<DateRangePicker onChange={handleDateRange} display='flex' flexGrow={1}/>
-							</Field.Row>
-						</Field>
-					</Margins>
-				</Box>
-				<Box display='flex' flexDirection='row' alignItems='flex-end'>
-					{type === '' && <Field>
-						<Field.Label>{t('Channel_name')}</Field.Label>
-						<Field.Row>
-							<RoomAutoComplete error={errors.rid} value={rid} onChange={handleRid} placeholder={t('Channel_Name_Placeholder')}/>
-						</Field.Row>
-						{errors.rid && <Field.Error>
-							{errors.rid}
-						</Field.Error>}
-					</Field>}
-					{type === 'u' && <Field>
-						<Field.Label>{t('Users')}</Field.Label>
-						<Field.Row>
-							<UserAutoCompleteMultiple error={errors.users} value={users} onChange={onChangeUsers} placeholder={t('Username_Placeholder')}/>
-						</Field.Row>
-						{errors.users && <Field.Error>
-							{errors.users}
-						</Field.Error>}
-					</Field>}
-					{type === 'd' && <Field>
-						<Field.Label>{t('Users')}</Field.Label>
-						<Field.Row>
-							<UserAutoCompleteMultiple error={errors.users} value={users} onChange={onChangeUsers} placeholder={t('Username_Placeholder')}/>
-						</Field.Row>
-						{errors.users && <Field.Error>
-							{errors.users}
-						</Field.Error>}
-					</Field>}
-					{type === 'l' && <Box display='flex' flexDirection='row' w='full' mi='neg-x4'>
-						<Margins inline='x4'>
+						<Flex.Item shrink={1}>
 							<Field>
-								<Field.Label flexGrow={0}>{t('Visitor')}</Field.Label>
+								<Field.Label>{t('Message')}</Field.Label>
 								<Field.Row>
-									<VisitorAutoComplete error={errors.visitor} value={visitor} onChange={handleVisitor} placeholder={t('Username_Placeholder')}/>
+									<TextInput value={msg} onChange={handleMsg} placeholder={t('Search')}/>
 								</Field.Row>
-								{errors.visitor && <Field.Error>
-									{errors.visitor}
-								</Field.Error>}
 							</Field>
 							<Field>
-								<Field.Label flexGrow={0}>{t('Agent')}</Field.Label>
+								<Field.Label>{t('Date')}</Field.Label>
 								<Field.Row>
-									<AutoCompleteAgent error={errors.agent} value={agent} onChange={handleAgent} placeholder={t('Username_Placeholder')}/>
+									<DateRangePicker onChange={handleDateRange} display='flex' flexGrow={1}/>
 								</Field.Row>
-								{errors.agent && <Field.Error>
-									{errors.agent}
-								</Field.Error>}
 							</Field>
-						</Margins>
-					</Box>}
-					<ButtonGroup mis='x8' align='end'>
-						<Button primary onClick={apply}>{t('Apply')}</Button>
-					</ButtonGroup>
+						</Flex.Item>
+					</Margins>
+				</Box>
+				<Box display='flex' flexDirection='row' alignItems='flex-end'>
+					<Flex.Item shrink={1}>
+						{type === '' && <Field>
+							<Field.Label>{t('Channel_name')}</Field.Label>
+							<Field.Row>
+								<RoomAutoComplete error={errors.rid} value={rid} onChange={handleRid} placeholder={t('Channel_Name_Placeholder')}/>
+							</Field.Row>
+							{errors.rid && <Field.Error>
+								{errors.rid}
+							</Field.Error>}
+						</Field>}
+						{type === 'u' && <Field>
+							<Field.Label>{t('Users')}</Field.Label>
+							<Field.Row>
+								<UserAutoCompleteMultiple error={errors.users} value={users} onChange={onChangeUsers} placeholder={t('Username_Placeholder')}/>
+							</Field.Row>
+							{errors.users && <Field.Error>
+								{errors.users}
+							</Field.Error>}
+						</Field>}
+						{type === 'd' && <Field>
+							<Field.Label>{t('Users')}</Field.Label>
+							<Field.Row>
+								<UserAutoCompleteMultiple error={errors.users} value={users} onChange={onChangeUsers} placeholder={t('Username_Placeholder')}/>
+							</Field.Row>
+							{errors.users && <Field.Error>
+								{errors.users}
+							</Field.Error>}
+						</Field>}
+						{type === 'l' && <>
+							<Margins inline='x4'>
+								<Field>
+									<Field.Label flexGrow={0}>{t('Visitor')}</Field.Label>
+									<Field.Row>
+										<VisitorAutoComplete error={errors.visitor} value={visitor} onChange={handleVisitor} placeholder={t('Username_Placeholder')}/>
+									</Field.Row>
+									{errors.visitor && <Field.Error>
+										{errors.visitor}
+									</Field.Error>}
+								</Field>
+								<Field>
+									<Field.Label flexGrow={0}>{t('Agent')}</Field.Label>
+									<Field.Row>
+										<AutoCompleteAgent error={errors.agent} value={agent} onChange={handleAgent} placeholder={t('Username_Placeholder')}/>
+									</Field.Row>
+									{errors.agent && <Field.Error>
+										{errors.agent}
+									</Field.Error>}
+								</Field>
+							</Margins>
+						</>}
+						<ButtonGroup mis='x8' align='end'>
+							<Button primary onClick={apply}>{t('Apply')}</Button>
+						</ButtonGroup>
+					</Flex.Item>
 				</Box>
 				<Result setDataRef={setData} />
 			</Margins>