From f16fda11d009462bd0f2dec8e1611d4b43c1c97d Mon Sep 17 00:00:00 2001 From: Deepak Bhagat Date: Thu, 27 Nov 2025 13:32:08 +0530 Subject: [PATCH 1/3] fix: prevent message text from being cut off in channel list - Add proper flex constraints and overflow handling to prevent text clipping - Increase base row height to accommodate larger font sizes - Ensure ellipsis truncation works correctly at all font scales - Add width constraints and flexShrink to text containers - Fix text truncation to show ellipsis instead of cutting mid-word --- app/containers/RoomItem/LastMessage.tsx | 28 ++++++++++--------- app/containers/RoomItem/styles.ts | 13 +++++++-- .../markdown/components/Preview.tsx | 2 ++ .../useResponsiveLayout.tsx | 4 +-- 4 files changed, 30 insertions(+), 17 deletions(-) diff --git a/app/containers/RoomItem/LastMessage.tsx b/app/containers/RoomItem/LastMessage.tsx index 23ca3650658..355c2a66975 100644 --- a/app/containers/RoomItem/LastMessage.tsx +++ b/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,20 +14,22 @@ 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 ( - + + + ); }, arePropsEqual); diff --git a/app/containers/RoomItem/styles.ts b/app/containers/RoomItem/styles.ts index 674451fb18c..638ab6c2685 100644 --- a/app/containers/RoomItem/styles.ts +++ b/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 }, diff --git a/app/containers/markdown/components/Preview.tsx b/app/containers/markdown/components/Preview.tsx index cc48e6bbbfc..f9a158b264a 100644 --- a/app/containers/markdown/components/Preview.tsx +++ b/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} diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx index 5582976299c..68771200dab 100644 --- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx +++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx @@ -18,8 +18,8 @@ interface IResponsiveFontScaleProviderProps { export const ResponsiveLayoutContext = createContext({} as IResponsiveLayoutContextData); 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 = 84; +export const BASE_ROW_HEIGHT_CONDENSED = 68; const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProps) => { // `fontScale` is the current font scaling value of the device. From 64bf8f7f344efd5f577bb25360b09ff1acb3db0b Mon Sep 17 00:00:00 2001 From: Deepak Bhagat Date: Thu, 27 Nov 2025 19:18:30 +0530 Subject: [PATCH 2/3] fix: lint errors --- app/containers/markdown/components/Preview.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/containers/markdown/components/Preview.tsx b/app/containers/markdown/components/Preview.tsx index f9a158b264a..d1e22de54ed 100644 --- a/app/containers/markdown/components/Preview.tsx +++ b/app/containers/markdown/components/Preview.tsx @@ -26,8 +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} + // ellipsizeMode="tail" + // allowFontScaling={true} testID={testID || `markdown-preview-${m}`}> {m} From b0bf3ce131e909b0fe984f0c7e31e2bca305d1f0 Mon Sep 17 00:00:00 2001 From: Deepak Bhagat Date: Thu, 27 Nov 2025 20:19:50 +0530 Subject: [PATCH 3/3] fix: Increase row height for small font scales (< 0.9) to accommodate text --- app/containers/RoomItem/LastMessage.tsx | 22 +++++++++---------- app/containers/RoomItem/Wrapper.tsx | 6 +++-- .../useResponsiveLayout.tsx | 15 +++++++++---- 3 files changed, 26 insertions(+), 17 deletions(-) diff --git a/app/containers/RoomItem/LastMessage.tsx b/app/containers/RoomItem/LastMessage.tsx index 355c2a66975..5199ee95186 100644 --- a/app/containers/RoomItem/LastMessage.tsx +++ b/app/containers/RoomItem/LastMessage.tsx @@ -18,17 +18,17 @@ const LastMessage = React.memo(({ lastMessage, type, showLastMessage, username, return ( - + ); }, arePropsEqual); diff --git a/app/containers/RoomItem/Wrapper.tsx b/app/containers/RoomItem/Wrapper.tsx index 07671fbfa4b..8838ed8b85a 100644 --- a/app/containers/RoomItem/Wrapper.tsx +++ b/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 ( {children} diff --git a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx index 68771200dab..938c51352dd 100644 --- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx +++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx @@ -18,8 +18,11 @@ interface IResponsiveFontScaleProviderProps { export const ResponsiveLayoutContext = createContext({} as IResponsiveLayoutContextData); export const FONT_SCALE_LIMIT = 1.3; -export const BASE_ROW_HEIGHT = 84; -export const BASE_ROW_HEIGHT_CONDENSED = 68; +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. @@ -27,8 +30,12 @@ const ResponsiveLayoutProvider = ({ children }: IResponsiveFontScaleProviderProp 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 (