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 (