fix: update thumb message layout

RocketChat · Sep 19, 2024 · f95c6d8 · f95c6d8
1 parent 5225e5e
commit f95c6d8
Showing 1 changed file with 33 additions and 25 deletions.
diff --git a/app/containers/message/Components/Attachments/Reply.tsx b/app/containers/message/Components/Attachments/Reply.tsx
@@ -30,7 +30,7 @@ const styles = StyleSheet.create({
 	attachmentContainer: {
 		flex: 1,
 		borderRadius: 4,
-		flexDirection: 'column',
+		flexDirection: 'row',
 		paddingVertical: 4,
 		paddingLeft: 8
 	},
@@ -43,6 +43,11 @@ const styles = StyleSheet.create({
 		alignItems: 'center',
 		marginBottom: 8
 	},
+	titleAndDesciptionContainer: {
+		flexDirection: "column",
+		flex: 1,
+		width: 200
+	},
 	author: {
 		fontSize: 16,
 		...sharedStyles.textMedium,
@@ -72,11 +77,12 @@ const styles = StyleSheet.create({
 		marginBottom: 4
 	},
 	image: {
-		height: 200,
-		flex: 1,
+		height: 80,
+		width: 80,
 		borderTopLeftRadius: 4,
 		borderTopRightRadius: 4,
-		marginBottom: 1
+		marginBottom: 1,
+		marginLeft: 20
 	},
 	title: {
 		flex: 1,
@@ -245,28 +251,30 @@ const Reply = React.memo(
 					background={Touchable.Ripple(themes[theme].surfaceNeutral)}
 					disabled={!!(loading || attachment.message_link)}>
 					<View style={styles.attachmentContainer}>
-						<Title attachment={attachment} timeFormat={timeFormat} theme={theme} />
-						<Description attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
+						<View style={styles.titleAndDesciptionContainer}>
+							<Title attachment={attachment} timeFormat={timeFormat} theme={theme} />
+							<Description attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
+							<Attachments
+								attachments={attachment.attachments}
+								getCustomEmoji={getCustomEmoji}
+								timeFormat={timeFormat}
+								style={[{ color: themes[theme].fontHint, fontSize: 14, marginBottom: 8 }]}
+								isReply
+								showAttachment={showAttachment}
+							/>
+							<Fields attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
+							{loading ? (
+								<View style={[styles.backdrop]}>
+									<View
+										style={[
+											styles.backdrop,
+											{ backgroundColor: themes[theme].surfaceNeutral, opacity: themes[theme].attachmentLoadingOpacity }
+										]}></View>
+									<RCActivityIndicator />
+								</View>
+							) : null}
+						</View>
 						<UrlImage image={attachment.thumb_url} />
-						<Attachments
-							attachments={attachment.attachments}
-							getCustomEmoji={getCustomEmoji}
-							timeFormat={timeFormat}
-							style={[{ color: themes[theme].fontHint, fontSize: 14, marginBottom: 8 }]}
-							isReply
-							showAttachment={showAttachment}
-						/>
-						<Fields attachment={attachment} getCustomEmoji={getCustomEmoji} theme={theme} />
-						{loading ? (
-							<View style={[styles.backdrop]}>
-								<View
-									style={[
-										styles.backdrop,
-										{ backgroundColor: themes[theme].surfaceNeutral, opacity: themes[theme].attachmentLoadingOpacity }
-									]}></View>
-								<RCActivityIndicator />
-							</View>
-						) : null}
 					</View>
 				</Touchable>
 				<Markdown msg={msg} username={user.username} getCustomEmoji={getCustomEmoji} theme={theme} />