fix: message composer placeholder breaking lines (#5772)

Author: diegolmello

app/containers/MessageComposer/components/ComposerInput.tsx

@@ -12,8 +12,14 @@ import { useSubscription, useAutoSaveDraft } from '../hooks';
 import sharedStyles from '../../../views/Styles';
 import { useTheme } from '../../../theme';
 import { userTyping } from '../../../actions/room';
-import { getRoomTitle, parseJson } from '../../../lib/methods/helpers';
-import { MAX_HEIGHT, MIN_HEIGHT, NO_CANNED_RESPONSES, MARKDOWN_STYLES } from '../constants';
+import { getRoomTitle, isTablet, parseJson } from '../../../lib/methods/helpers';
+import {
+	MAX_HEIGHT,
+	MIN_HEIGHT,
+	NO_CANNED_RESPONSES,
+	MARKDOWN_STYLES,
+	COMPOSER_INPUT_PLACEHOLDER_MAX_LENGTH
+} from '../constants';
 import database from '../../../lib/database';
 import Navigation from '../../../lib/navigation/appNavigation';
 import { emitter } from '../../../lib/methods/helpers/emitter';
@@ -44,6 +50,9 @@ export const ComposerInput = memo(
 		let placeholder = tmid ? I18n.t('Add_thread_reply') : '';
 		if (subscription && !tmid) {
 			placeholder = I18n.t('Message_roomname', { roomName: (subscription.t === 'd' ? '@' : '#') + getRoomTitle(subscription) });
+			if (!isTablet && placeholder.length > COMPOSER_INPUT_PLACEHOLDER_MAX_LENGTH) {
+				placeholder = `${placeholder.slice(0, COMPOSER_INPUT_PLACEHOLDER_MAX_LENGTH)}...`;
+			}
 		}
 		const route = useRoute<RouteProp<ChatsStackParamList, 'RoomView'>>();
 		const usedCannedResponse = route.params?.usedCannedResponse;

app/containers/MessageComposer/constants.ts

@@ -35,3 +35,5 @@ export const MARKDOWN_STYLES: Record<TMarkdownStyle, string> = {
 	code: '`',
 	'code-block': '```'
 };
+
+export const COMPOSER_INPUT_PLACEHOLDER_MAX_LENGTH = 30;