diff --git a/app/containers/RoomItem/LastMessage.tsx b/app/containers/RoomItem/LastMessage.tsx index 23ca3650658..5199ee95186 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,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 ( + + ); }, 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/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..d1e22de54ed 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..938c51352dd 100644 --- a/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx +++ b/app/lib/hooks/useResponsiveLayout/useResponsiveLayout.tsx @@ -20,6 +20,9 @@ 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. @@ -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 (