From 66edd7a3c856f4b2b70ddee61b92c90a745c7c28 Mon Sep 17 00:00:00 2001
From: Djorkaeff Alexandre <djorkaeff.unb@gmail.com>
Date: Fri, 8 May 2020 14:09:36 -0300
Subject: [PATCH] [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                   | 1 +
 app/presentation/UserItem.js                     | 3 ++-
 app/views/RoomActionsView/index.js               | 4 ++--
 app/views/RoomActionsView/styles.js              | 5 ++++-
 app/views/RoomInfoView/styles.js                 | 8 ++++++--
 app/views/RoomView/Header/Header.js              | 1 +
 app/views/RoomsListView/Header/Header.android.js | 5 +++--
 app/views/RoomsListView/Header/Header.ios.js     | 2 +-
 app/views/RoomsListView/ServerDropdown.js        | 4 ++--
 app/views/SidebarView/SidebarItem.js             | 2 +-
 10 files changed, 23 insertions(+), 12 deletions(-)

diff --git a/app/containers/message/User.js b/app/containers/message/User.js
index 827a9b731..705099309 100644
--- a/app/containers/message/User.js
+++ b/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}>
diff --git a/app/presentation/UserItem.js b/app/presentation/UserItem.js
index bb37108bf..1f536af06 100644
--- a/app/presentation/UserItem.js
+++ b/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,
diff --git a/app/views/RoomActionsView/index.js b/app/views/RoomActionsView/index.js
index 4bef27adc..869c8faca 100644
--- a/app/views/RoomActionsView/index.js
+++ b/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} />}
 				</>
diff --git a/app/views/RoomActionsView/styles.js b/app/views/RoomActionsView/styles.js
index 8021dfb2a..93079c1d8 100644
--- a/app/views/RoomActionsView/styles.js
+++ b/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'
 	}
diff --git a/app/views/RoomInfoView/styles.js b/app/views/RoomInfoView/styles.js
index fe82ca7c4..ed6b1d978 100644
--- a/app/views/RoomInfoView/styles.js
+++ b/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: {
diff --git a/app/views/RoomView/Header/Header.js b/app/views/RoomView/Header/Header.js
index 2a668f0ed..d9b527550 100644
--- a/app/views/RoomView/Header/Header.js
+++ b/app/views/RoomView/Header/Header.js
@@ -35,6 +35,7 @@ const styles = StyleSheet.create({
 		alignItems: 'center'
 	},
 	subtitle: {
+		marginRight: -16,
 		...sharedStyles.textRegular,
 		fontSize: 12
 	},
diff --git a/app/views/RoomsListView/Header/Header.android.js b/app/views/RoomsListView/Header/Header.android.js
index b40a9442d..33ba0b4b9 100644
--- a/app/views/RoomsListView/Header/Header.android.js
+++ b/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,
diff --git a/app/views/RoomsListView/Header/Header.ios.js b/app/views/RoomsListView/Header/Header.ios.js
index 35a8a65d9..896b47151 100644
--- a/app/views/RoomsListView/Header/Header.ios.js
+++ b/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>
diff --git a/app/views/RoomsListView/ServerDropdown.js b/app/views/RoomsListView/ServerDropdown.js
index de9c95c69..f151f42d1 100644
--- a/app/views/RoomsListView/ServerDropdown.js
+++ b/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.serverUrl, { color: themes[theme].auxiliaryText }]}>{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 }]} numberOfLines={1}>{item.id}</Text>
 						</View>
 						{item.id === server ? <Check theme={theme} /> : null}
 					</View>
diff --git a/app/views/SidebarView/SidebarItem.js b/app/views/SidebarView/SidebarItem.js
index 0b2b8d2bc..7959438c2 100644
--- a/app/views/SidebarView/SidebarItem.js
+++ b/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>