diff --git a/src/components/CategoryPicker.tsx b/src/components/CategoryPicker.tsx index e9e3422909e2..a251fd431b9e 100644 --- a/src/components/CategoryPicker.tsx +++ b/src/components/CategoryPicker.tsx @@ -4,6 +4,7 @@ import useDebouncedState from '@hooks/useDebouncedState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import useOnyx from '@hooks/useOnyx'; +import useThemeStyles from '@hooks/useThemeStyles'; import {getCategoryListSections} from '@libs/CategoryOptionListUtils'; import type {Category} from '@libs/CategoryOptionListUtils'; import {getEnabledCategoriesCount} from '@libs/CategoryUtils'; @@ -29,6 +30,7 @@ type CategoryPickerProps = { }; function CategoryPicker({selectedCategory, policyID, onSubmit, addBottomSafeAreaPadding = false, contentContainerStyle}: CategoryPickerProps) { + const styles = useThemeStyles(); const [policyCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`, {canBeMissing: true}); const [policyCategoriesDraft] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_CATEGORIES_DRAFT}${policyID}`, {canBeMissing: true}); const [policyRecentlyUsedCategories] = useOnyx(`${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`, {canBeMissing: true}); @@ -88,6 +90,7 @@ function CategoryPicker({selectedCategory, policyID, onSubmit, addBottomSafeArea initiallyFocusedOptionKey={selectedOptionKey ?? undefined} addBottomSafeAreaPadding={addBottomSafeAreaPadding} contentContainerStyle={contentContainerStyle} + listItemTitleStyles={styles.mnw100} /> ); } diff --git a/src/components/TagPicker.tsx b/src/components/TagPicker.tsx index 61ed1b2f2791..b2efa3666c7e 100644 --- a/src/components/TagPicker.tsx +++ b/src/components/TagPicker.tsx @@ -135,11 +135,13 @@ function TagPicker({ const selectedOptionKey = sections.at(0)?.data?.find((policyTag) => policyTag.searchText === selectedTag)?.keyForList; + const listItemTitleStyles = useMemo(() => [styles.breakAll, styles.mnw100], [styles.breakAll, styles.mnw100]); + return (