fix: prevent message text from being cut off in channel list

app/containers/RoomItem/LastMessage.tsx

@@ -1,6 +1,6 @@
 import { dequal } from 'dequal';
 import React from 'react';
-import { type TextStyle } from 'react-native';
+import { View, type TextStyle } from 'react-native';
 
 import { formatLastMessage } from '../../lib/methods/formatLastMessage';
 import { isAndroid } from '../../lib/methods/helpers';
@@ -14,9 +14,10 @@ const arePropsEqual = (oldProps: any, newProps: any) => dequal(oldProps, newProp
 const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username, alert, useRealName }: ILastMessageProps) => {
 	const { colors } = useTheme();
 	// Android has a bug with the text align on the markdown preview
-	const alignSelf: TextStyle = isAndroid ? { alignSelf: 'stretch' } : {};
+	const alignSelf: TextStyle = isAndroid ? { alignSelf: 'stretch', width: '100%' } : { width: '100%' };
 
 	return (
+		<View style={styles.lastMessageContainer}>
 		<MarkdownPreview
 			msg={formatLastMessage({
 				lastMessage,
@@ -28,6 +29,7 @@ const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username,
 			style={[styles.markdownText, { color: alert ? colors.fontDefault : colors.fontSecondaryInfo }, alignSelf]}
 			numberOfLines={2}
 		/>
+		</View>
 	);
 }, arePropsEqual);
 

app/containers/RoomItem/Wrapper.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { View } from 'react-native';
+import { StyleSheet, View } from 'react-native';
 
 import { DisplayMode } from '../../lib/constants/constantDisplayMode';
 import { useTheme } from '../../theme';
@@ -11,6 +11,7 @@ import { useResponsiveLayout } from '../../lib/hooks/useResponsiveLayout/useResp
 const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapperProps): React.ReactElement => {
 	const { colors } = useTheme();
 	const { rowHeight, rowHeightCondensed } = useResponsiveLayout();
+	const borderWidth = Math.max(StyleSheet.hairlineWidth || 0, 0.5);
 	return (
 		<View
 			style={[styles.container, { height: displayMode === DisplayMode.Condensed ? rowHeightCondensed : rowHeight }]}
@@ -22,7 +23,8 @@ const Wrapper = ({ accessibilityLabel, children, displayMode, ...props }: IWrapp
 				style={[
 					styles.centerContainer,
 					{
-						borderColor: colors.strokeLight
+						borderColor: colors.strokeLight,
+						borderBottomWidth: borderWidth
 					}
 				]}>
 				{children}

app/containers/RoomItem/styles.ts

@@ -17,6 +17,7 @@ export default StyleSheet.create({
 	},
 	centerContainer: {
 		flex: 1,
+		minWidth: 0,
 		paddingVertical: 10,
 		paddingRight: 14,
 		borderBottomWidth: StyleSheet.hairlineWidth
@@ -32,7 +33,8 @@ export default StyleSheet.create({
 	row: {
 		flex: 1,
 		flexDirection: 'row',
-		alignItems: 'flex-start'
+		alignItems: 'flex-start',
+		minWidth: 0
 	},
 	wrapUpdatedAndBadge: {
 		alignItems: 'flex-end'
@@ -54,8 +56,15 @@ export default StyleSheet.create({
 	status: {
 		marginRight: 2
 	},
-	markdownText: {
+	lastMessageContainer: {
 		flex: 1,
+		flexShrink: 1,
+		minWidth: 0,
+		marginRight: 4
+	},
+	markdownText: {
+		width: '100%',
+		flexShrink: 1,
 		fontSize: 14,
 		...sharedStyles.textRegular
 	},

app/containers/markdown/components/Preview.tsx

@@ -26,6 +26,8 @@ const MarkdownPreview = ({ msg, numberOfLines = 1, style = [], testID }: IMarkdo
 			accessibilityLabel={m}
 			style={[styles.text, { color: themes[theme].fontDefault, lineHeight: undefined }, ...style]}
 			numberOfLines={numberOfLines}
+			// ellipsizeMode="tail"
+			// allowFontScaling={true}
 			testID={testID || `markdown-preview-${m}`}>
 			{m}
 		</Text>

app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx

@@ -20,15 +20,22 @@ export const ResponsiveLayoutContext = createContext({} as IResponsiveLayoutCont
 export const FONT_SCALE_LIMIT = 1.3;
 export const BASE_ROW_HEIGHT = 75;
 export const BASE_ROW_HEIGHT_CONDENSED = 60;
+export const BASE_ROW_HEIGHT_SMALL_FONT = 82;
+export const BASE_ROW_HEIGHT_CONDENSED_SMALL_FONT = 68;
+const SMALL_FONT_THRESHOLD = 0.9;
 
 const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProps) => {
 	// `fontScale` is the current font scaling value of the device.
 	const { fontScale, width, height } = useWindowDimensions();
 	const isLargeFontScale = fontScale > FONT_SCALE_LIMIT;
 	// `fontScaleLimited` applies the `FONT_SCALE_LIMIT` to prevent layout issues on large font sizes.
 	const fontScaleLimited = isLargeFontScale ? FONT_SCALE_LIMIT : fontScale;
-	const rowHeight = BASE_ROW_HEIGHT * fontScale;
-	const rowHeightCondensed = BASE_ROW_HEIGHT_CONDENSED * fontScale;
+	// Use increased height only for smallest font sizes to prevent text cutting
+	const isSmallFont = fontScale < SMALL_FONT_THRESHOLD;
+	const baseRowHeight = isSmallFont ? BASE_ROW_HEIGHT_SMALL_FONT : BASE_ROW_HEIGHT;
+	const baseRowHeightCondensed = isSmallFont ? BASE_ROW_HEIGHT_CONDENSED_SMALL_FONT : BASE_ROW_HEIGHT_CONDENSED;
+	const rowHeight = baseRowHeight * fontScale;
+	const rowHeightCondensed = baseRowHeightCondensed * fontScale;
 
 	return (
 		<ResponsiveLayoutContext.Provider