Merge pull request #45454 from software-mansion-labs/filip-solecki/se…

…lection-mode-fix-text-wrap [CP Staging] Fix text wrapping when no option to select
Expensify · Jul 16, 2024 · cb1e9bc · cb1e9bc
2 parents 307565a + fe9186e
commit cb1e9bc
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 1 deletion.
diff --git a/src/components/Search/SearchPageHeader.tsx b/src/components/Search/SearchPageHeader.tsx
@@ -105,7 +105,7 @@ function SearchPageHeader({query, selectedItems = {}, hash, clearSelectedItems,
                 iconHeight: variables.iconSizeLarge,
                 iconWidth: variables.iconSizeLarge,
                 numberOfLinesTitle: 2,
-                titleStyle: {...styles.colorMuted, ...styles.fontWeightNormal},
+                titleStyle: {...styles.colorMuted, ...styles.fontWeightNormal, ...styles.textWrap},
             };
 
             options.push({
@@ -129,6 +129,7 @@ function SearchPageHeader({query, selectedItems = {}, hash, clearSelectedItems,
         theme.icon,
         styles.colorMuted,
         styles.fontWeightNormal,
+        styles.textWrap,
     ]);
 
     if (isSmallScreenWidth) {

diff --git a/src/pages/Search/SearchSelectedNarrow.tsx b/src/pages/Search/SearchSelectedNarrow.tsx
@@ -64,7 +64,10 @@ function SearchSelectedNarrow({options, itemsLength}: SearchSelectedNarrowProps)
             >
                 {options.map((option, index) => (
                     <MenuItem
+                        // eslint-disable-next-line react/jsx-props-no-spreading
+                        {...option}
                         title={option.text}
+                        titleStyle={option.titleStyle}
                         icon={option.icon}
                         onPress={() => handleOnMenuItemPress(option, index)}
                         key={option.value}

diff --git a/src/styles/index.ts b/src/styles/index.ts
@@ -507,6 +507,10 @@ const styles = (theme: ThemeColors) =>
             textAlign: 'center',
         },
 
+        textWrap: {
+            ...whiteSpace.preWrap,
+        },
+
         textNoWrap: {
             ...whiteSpace.noWrap,
         },