Truncation fix for Lack of maximum height for the description field

src/components/MenuItem.tsx

@@ -178,6 +178,9 @@ type MenuItemBaseProps = {
     /** Text that appears above the title */
     label?: string;
 
+    /** Character limit after which the menu item text will be truncated */
+    characterLimit?: number;
+
     isLabelHoverable?: boolean;
 
     /** Label to be displayed on the right */
@@ -201,6 +204,9 @@ type MenuItemBaseProps = {
     /** Should we make this selectable with a checkbox */
     shouldShowSelectedState?: boolean;
 
+    /** Should we truncate the title */
+    shouldTruncateTitle?: boolean;
+
     /** Whether this item is selected */
     isSelected?: boolean;
 
@@ -325,7 +331,6 @@ type MenuItemBaseProps = {
 };
 
 type MenuItemProps = (IconProps | AvatarProps | NoIcon) & MenuItemBaseProps;
-
 function MenuItem(
     {
         interactive = true,
@@ -376,6 +381,8 @@ function MenuItem(
         subtitle,
         shouldShowBasicTitle,
         label,
+        shouldTruncateTitle = false,
+        characterLimit = 200,
         isLabelHoverable = true,
         rightLabel,
         shouldShowSelectedState = false,
@@ -477,8 +484,12 @@ function MenuItem(
             titleToWrap = html;
         }
 
+        if (shouldTruncateTitle) {
+            titleToWrap = Parser.truncateHTML(titleToWrap, characterLimit, {ellipsis: '...'});
+        }
+
         return titleToWrap ? `<comment>${titleToWrap}</comment>` : '';
-    }, [title, shouldRenderAsHTML, shouldParseTitle, html]);
+    }, [title, shouldRenderAsHTML, shouldParseTitle, characterLimit, shouldTruncateTitle, html]);
 
     const processedHelperText = useMemo(() => {
         let textToWrap = '';

src/libs/Parser.ts

@@ -43,6 +43,10 @@ class ExpensiMarkWithContext extends ExpensiMark {
             cacheVideoAttributes: extras?.cacheVideoAttributes,
         });
     }
+
+    truncateHTML(htmlString: string, limit: number, extras?: {ellipsis: string | undefined}): string {
+        return super.truncateHTML(htmlString, limit, extras);
+    }
 }
 
 ExpensiMarkWithContext.setLogger(Log);

src/pages/ReportDetailsPage.tsx

@@ -127,7 +127,6 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
     const isExpenseReport = isMoneyRequestReport || isInvoiceReport || isMoneyRequest;
     const isSingleTransactionView = isMoneyRequest || isTrackExpenseReport;
     const isSelfDMTrackExpenseReport = isTrackExpenseReport && ReportUtils.isSelfDM(parentReport);
-
     const shouldDisableRename = useMemo(() => ReportUtils.shouldDisableRename(report), [report]);
     const parentNavigationSubtitleData = ReportUtils.getParentNavigationSubtitle(report);
     // eslint-disable-next-line react-compiler/react-compiler, react-hooks/exhaustive-deps -- policy is a dependency because `getChatRoomSubtitle` calls `getPolicyName` which in turn retrieves the value from the `policy` value stored in Onyx
@@ -720,10 +719,12 @@ function ReportDetailsPage({policies, report, session, personalDetails}: ReportD
                     {shouldShowReportDescription && (
                         <OfflineWithFeedback pendingAction={report.pendingFields?.description}>
                             <MenuItemWithTopDescription
-                                shouldShowRightIcon={canEditReportDescription}
-                                interactive={canEditReportDescription}
+                                shouldShowRightIcon
+                                interactive
                                 title={report.description}
                                 shouldRenderAsHTML
+                                shouldTruncateTitle
+                                characterLimit={100}
                                 shouldCheckActionAllowedOnPress={false}
                                 description={translate('reportDescriptionPage.roomDescription')}
                                 onPress={() => Navigation.navigate(ROUTES.REPORT_DESCRIPTION.getRoute(report.reportID))}

src/pages/RoomDescriptionPage.tsx

@@ -2,11 +2,12 @@ import {useFocusEffect} from '@react-navigation/native';
 import React, {useCallback, useRef, useState} from 'react';
 import {View} from 'react-native';
 import type {OnyxCollection} from 'react-native-onyx';
-import FullPageNotFoundView from '@components/BlockingViews/FullPageNotFoundView';
 import FormProvider from '@components/Form/FormProvider';
 import InputWrapper from '@components/Form/InputWrapper';
 import HeaderWithBackButton from '@components/HeaderWithBackButton';
+import RenderHTML from '@components/RenderHTML';
 import ScreenWrapper from '@components/ScreenWrapper';
+import ScrollView from '@components/ScrollView';
 import Text from '@components/Text';
 import TextInput from '@components/TextInput';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
@@ -60,14 +61,15 @@ function RoomDescriptionPage({report, policies}: RoomDescriptionPageProps) {
         }, []),
     );
 
+    const canEdit = ReportUtils.canEditReportDescription(report, policy);
     return (
         <ScreenWrapper
             shouldEnableMaxHeight
             includeSafeAreaPaddingBottom={false}
             testID={RoomDescriptionPage.displayName}
         >
-            <FullPageNotFoundView shouldShow={!ReportUtils.canEditReportDescription(report, policy)}>
-                <HeaderWithBackButton title={translate('reportDescriptionPage.roomDescription')} />
+            <HeaderWithBackButton title={translate('reportDescriptionPage.roomDescription')} />
+            {canEdit && (
                 <FormProvider
                     style={[styles.flexGrow1, styles.ph5]}
                     formID={ONYXKEYS.FORMS.REPORT_DESCRIPTION_FORM}
@@ -102,7 +104,12 @@ function RoomDescriptionPage({report, policies}: RoomDescriptionPageProps) {
                         />
                     </View>
                 </FormProvider>
-            </FullPageNotFoundView>
+            )}
+            {!canEdit && (
+                <ScrollView style={[styles.flexGrow1, styles.ph5, styles.mb5]}>
+                    <RenderHTML html={Parser.replace(description)} />
+                </ScrollView>
+            )}
         </ScreenWrapper>
     );
 }