[FIX] Big names overflow (#2072)

* [FIX] Big names overflow

* [FIX] Message time

Co-authored-by: devyaniChoubey <devyanichoubey16@gmail.com>

* [FIX] Some alignments

* fix user item overflow

* some adjustments

Co-authored-by: devyaniChoubey <devyanichoubey16@gmail.com>
Co-authored-by: Diego Mello <diegolmello@gmail.com>

app/containers/message/User.js

@@ -53,6 +53,7 @@ const User = React.memo(({
 				<TouchableOpacity
 					style={styles.titleContainer}
 					onPress={() => navToRoomInfo(navParam)}
+					style={styles.titleContainer}
 					disabled={author._id === user.id}
 				>
 					<Text style={[styles.username, { color: themes[theme].titleText }]} numberOfLines={1}>

app/presentation/UserItem.js

@@ -23,7 +23,8 @@ const styles = StyleSheet.create({
 	textContainer: {
 		flex: 1,
 		flexDirection: 'column',
-		justifyContent: 'center'
+		justifyContent: 'center',
+		marginRight: 15
 	},
 	name: {
 		fontSize: 17,

app/views/RoomActionsView/index.js

@@ -480,7 +480,7 @@ class RoomActionsView extends React.Component {
 					>
 						{t === 'd' && member._id ? <Status style={sharedStyles.status} id={member._id} /> : null }
 					</Avatar>
-					<View style={styles.roomTitleContainer}>
+					<View style={[styles.roomTitleContainer, item.disabled && styles.roomTitlePadding]}>
 						{room.t === 'd'
 							? <Text style={[styles.roomTitle, { color: themes[theme].titleText }]} numberOfLines={1}>{room.fname}</Text>
 							: (
@@ -497,7 +497,7 @@ class RoomActionsView extends React.Component {
 							numberOfLines={1}
 							theme={theme}
 						/>
-						{room.t === 'd' && <Markdown msg={member.statusText} style={[styles.roomDescription, { color: themes[theme].auxiliaryText }]} preview theme={theme} />}
+						{room.t === 'd' && <Markdown msg={member.statusText} style={[styles.roomDescription, { color: themes[theme].auxiliaryText }]} preview theme={theme} numberOfLines={1} />}
 					</View>
 					{!item.disabled && <DisclosureIndicator theme={theme} />}
 				</>

app/views/RoomActionsView/styles.js

@@ -43,9 +43,11 @@ export default StyleSheet.create({
 	roomTitleContainer: {
 		flex: 1
 	},
+	roomTitlePadding: {
+		paddingRight: 16
+	},
 	roomTitle: {
 		fontSize: 16,
-		paddingRight: 16,
 		...sharedStyles.textMedium
 	},
 	roomDescription: {
@@ -53,6 +55,7 @@ export default StyleSheet.create({
 		...sharedStyles.textRegular
 	},
 	roomTitleRow: {
+		paddingRight: 16,
 		flexDirection: 'row',
 		alignItems: 'center'
 	}

app/views/RoomInfoView/styles.js

@@ -16,28 +16,32 @@ export default StyleSheet.create({
 		justifyContent: 'center'
 	},
 	avatarContainer: {
-		height: 240,
+		minHeight: 240,
 		flexDirection: 'column',
 		alignItems: 'center',
 		justifyContent: 'center',
 		marginBottom: 20
 	},
 	avatarContainerDirectRoom: {
-		height: 320
+		paddingVertical: 16,
+		minHeight: 320
 	},
 	avatar: {
 		marginHorizontal: 10
 	},
 	roomTitleContainer: {
 		paddingTop: 20,
+		marginHorizontal: 16,
 		alignItems: 'center'
 	},
 	roomTitle: {
 		fontSize: 20,
+		...sharedStyles.textAlignCenter,
 		...sharedStyles.textMedium
 	},
 	roomUsername: {
 		fontSize: 18,
+		...sharedStyles.textAlignCenter,
 		...sharedStyles.textRegular
 	},
 	roomTitleRow: {

app/views/RoomView/Header/Header.js

@@ -35,6 +35,7 @@ const styles = StyleSheet.create({
 		alignItems: 'center'
 	},
 	subtitle: {
+		marginRight: -16,
 		...sharedStyles.textRegular,
 		fontSize: 12
 	},

app/views/RoomsListView/Header/Header.android.js

@@ -16,7 +16,8 @@ const styles = StyleSheet.create({
 	},
 	button: {
 		flexDirection: 'row',
-		alignItems: 'center'
+		alignItems: 'center',
+		marginRight: 64
 	},
 	server: {
 		fontSize: 20,
@@ -68,7 +69,7 @@ const Header = React.memo(({
 				{connecting ? <Text style={[styles.updating, titleColorStyle]}>{I18n.t('Connecting')}</Text> : null}
 				{isFetching ? <Text style={[styles.updating, titleColorStyle]}>{I18n.t('Updating')}</Text> : null}
 				<View style={styles.button}>
-					<Text style={[styles.server, isFetching && styles.serverSmall, titleColorStyle]}>{serverName}</Text>
+					<Text style={[styles.server, isFetching && styles.serverSmall, titleColorStyle]} numberOfLines={1}>{serverName}</Text>
 					<Image
 						style={[
 							styles.disclosure,

app/views/RoomsListView/Header/Header.ios.js

@@ -60,7 +60,7 @@ const Header = React.memo(({
 		>
 			<HeaderTitle connecting={connecting} isFetching={isFetching} theme={theme} />
 			<View style={styles.button}>
-				<Text style={[styles.server, { color: themes[theme].headerTintColor }]}>{serverName}</Text>
+				<Text style={[styles.server, { color: themes[theme].headerTintColor }]} numberOfLines={1}>{serverName}</Text>
 				<Image style={[styles.disclosure, showServerDropdown && styles.upsideDown]} source={{ uri: 'disclosure_indicator_server' }} />
 			</View>
 		</TouchableOpacity>

app/views/RoomsListView/ServerDropdown.js

@@ -213,8 +213,8 @@ class ServerDropdown extends Component {
 							)
 						}
 						<View style={styles.serverTextContainer}>
-							<Text style={[styles.serverName, { color: themes[theme].titleText }]}>{item.name || item.id}</Text>
+							<Text style={[styles.serverName, { color: themes[theme].titleText }]} numberOfLines={1}>{item.name || item.id}</Text>
-							<Text style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]}>{item.id}</Text>
+							<Text style={[styles.serverUrl, { color: themes[theme].auxiliaryText }]} numberOfLines={1}>{item.id}</Text>
 						</View>
 						{item.id === server ? <Check theme={theme} /> : null}
 					</View>

app/views/SidebarView/SidebarItem.js

@@ -21,7 +21,7 @@ const Item = React.memo(({
 			{left}
 		</View>
 		<View style={styles.itemCenter}>
-			<Text style={[styles.itemText, { color: themes[theme].titleText }]}>
+			<Text style={[styles.itemText, { color: themes[theme].titleText }]} numberOfLines={1}>
 				{text}
 			</Text>
 		</View>