Regression: Scroll on admin user info (#17711)

RocketChat · May 25, 2020 · e44f325 · e44f325
1 parent 5c0a991
commit e44f325
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 33 deletions.
diff --git a/client/admin/rooms/EditRoom.js b/client/admin/rooms/EditRoom.js
@@ -1,5 +1,5 @@
 import React, { useCallback, useState, useMemo } from 'react';
-import { Box, Button, Margins, TextInput, Skeleton, Field, ToggleSwitch, Divider, Icon, Callout } from '@rocket.chat/fuselage';
+import { Box, Button, Margins, TextInput, Skeleton, Field, ToggleSwitch, Divider, Icon, Callout, RadioButton	 } from '@rocket.chat/fuselage';
 
 import { useTranslation } from '../../contexts/TranslationContext';
 import { useEndpointDataExperimental, ENDPOINT_STATES } from '../../hooks/useEndpointDataExperimental';
@@ -103,41 +103,31 @@ function EditRoom({ room, onChange }) {
 					<TextInput disabled={deleted} value={(newData.roomTopic ?? room.topic) || ''} onChange={handleChange('roomTopic', room.topic)} flexGrow={1}/>
 				</Field.Row>
 			</Field>
-			<Field mbs='x20'>
+			<Divider />
+			<Field>
 				<Field.Row>
-					<Box display='flex' flexDirection='row' alignItems='flex-start'>
-						<Box display='flex' flexDirection='column' alignItems='flex-end' flexGrow='1' color={roomType !== 'c' ? 'hint' : 'default'}>
-							<Box fontScale='s1'>{t('Public')}</Box>
-							<Box fontScale='p1' style={{ textAlign: 'end' }}>{t('All_users_in_the_channel_can_write_new_messages')}</Box>
-						</Box>
-						<Margins inline='x16'>
-							<ToggleSwitch disabled={deleted} checked={roomType === 'p'} onChange={handleChange('roomType', room.t, updateType(roomType))}/>
-						</Margins>
-						<Box display='flex' flexDirection='column' alignItems='flex-start' flexGrow='1' color={roomType !== 'p' ? 'hint' : 'default'}>
-							<Box fontScale='s1'>{t('Private')}</Box>
-							<Box fontScale='p1' style={{ textAlign: 'start' }}>{t('Just_invited_people_can_access_this_channel')}</Box>
-						</Box>
+					<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
+						<Field.Label>{t('Public')}</Field.Label>
+						<RadioButton disabled={deleted} checked={roomType === 'p'} onChange={handleChange('roomType', room.t, updateType(roomType))}/>
 					</Box>
 				</Field.Row>
-				<Divider />
 			</Field>
-			<Field mbs='x20'>
+			<Field>
 				<Field.Row>
-					<Box display='flex' flexDirection='row' alignItems='flex-start'>
-						<Box display='flex' flexDirection='column' alignItems='flex-end' flexGrow='1' color={readOnly ? 'hint' : 'default'}>
-							<Box fontScale='s1'>{t('Collaborative')}</Box>
-							<Box fontScale='p1' style={{ textAlign: 'end' }}>{t('All_users_in_the_channel_can_write_new_messages')}</Box>
-						</Box>
-						<Margins inline='x16'>
-							<ToggleSwitch disabled={deleted} checked={readOnly} onChange={handleChange('readOnly', room.ro, () => !readOnly)}/>
-						</Margins>
-						<Box display='flex' flexDirection='column' alignItems='flex-start' flexGrow='1' color={!readOnly ? 'hint' : 'default'}>
-							<Box fontScale='s1'>{t('Read_only')}</Box>
-							<Box fontScale='p1' style={{ textAlign: 'start' }}>{t('Only_authorized_users_can_write_new_messages')}</Box>
-						</Box>
+					<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
+						<Field.Label>{t('Private')}</Field.Label>
+						<RadioButton disabled={deleted} checked={roomType !== 'p'} onChange={handleChange('roomType', room.t, updateType(roomType))}/>
+					</Box>
+				</Field.Row>
+			</Field>
+			<Divider />
+			<Field>
+				<Field.Row>
+					<Box display='flex' flexDirection='row' justifyContent='space-between' flexGrow={1}>
+						<Field.Label>{t('Read_only')}</Field.Label>
+						<ToggleSwitch disabled={deleted} checked={readOnly} onChange={handleChange('readOnly', room.ro, () => !readOnly)}/>
 					</Box>
 				</Field.Row>
-				<Divider />
 			</Field>
 			<Field>
 				<Field.Row>

diff --git a/client/admin/users/UserInfo.js b/client/admin/users/UserInfo.js
@@ -59,7 +59,7 @@ export function UserInfo({ data, onChange, ...props }) {
 	const avatarUrl = roomTypes.getConfig('d').getAvatarPath({ name: data.username || data.name, type: 'd', _id: data._id });
 
 	return <VerticalBar.ScrollableContent is='form' onSubmit={useCallback((e) => e.preventDefault(), [])} {...props}>
-		<Box display='flex' flexDirection='column' alignItems='center' withTruncatedText>
+		<Box display='flex' flexDirection='column' alignItems='center' flexShrink={0} withTruncatedText>
 			<Margins block='x2' inline='auto'>
 				<Avatar size={'x120'} title={data.username} url={avatarUrl}/>
 				<Box fontScale='h1' withTruncatedText>{data.name || data.username}</Box>
@@ -69,9 +69,9 @@ export function UserInfo({ data, onChange, ...props }) {
 		</Box>
 
 		<UserInfoActions isActive={data.active} isAdmin={data.roles.includes('admin')} _id={data._id} username={data.username} onChange={onChange}/>
-		<Box display='flex' flexDirection='column' w='full' backgroundColor='neutral-200' p='x16' withTruncatedText>
+		<Box display='flex' flexDirection='column' w='full' backgroundColor='neutral-200' p='x16' withTruncatedTex flexShrink={0}t>
 			<Margins blockEnd='x4'>
-				{data.bio && data.bio.trim().length > 0 && <MarkdownText fontScale='s1'>{data.bio}</MarkdownText>}
+				{data.bio && data.bio.trim().length > 0 && <Box withTruncatedText> <MarkdownText fontScale='s1'>{data.bio}</MarkdownText></Box>}
 				{!!data.roles.length && <>
 					<Box fontScale='micro' color='hint' mbs='none'>{t('Roles')}</Box>
 					<Box display='flex' flexDirection='row' flexWrap='wrap'>

diff --git a/client/components/basic/VerticalBar.js b/client/components/basic/VerticalBar.js
@@ -55,7 +55,7 @@ function VerticalBarContent(props) {
 	return <Page.Content {...props} />;
 }
 
-function VerticalBarScrollableContent({ children, props }) {
+function VerticalBarScrollableContent({ children, ...props }) {
 	return <Page.ScrollableContent padding='x24' mi='neg-x24' {...props}>
 		<Margins blockEnd='x16'>{children}</Margins>
 	</Page.ScrollableContent>;