fix styles

Author: 289Adam289

src/components/Search/SearchAutocompleteInput.tsx

@@ -61,6 +61,8 @@ type SearchAutocompleteInputProps = {
 
     /** Whether the search reports API call is running  */
     isSearchingForReports?: boolean;
+    /** Customize the TextInput container */
+    textInputContainerStyles?: StyleProp<ViewStyle>;
 } & Pick<TextInputProps, 'caretHidden' | 'autoFocus' | 'selection'>;
 
 function SearchAutocompleteInput(
@@ -82,6 +84,7 @@ function SearchAutocompleteInput(
         rightComponent,
         isSearchingForReports,
         selection,
+        textInputContainerStyles,
     }: SearchAutocompleteInputProps,
     ref: ForwardedRef<BaseTextInputRef>,
 ) {
@@ -125,7 +128,7 @@ function SearchAutocompleteInput(
                         maxLength={CONST.SEARCH_QUERY_LIMIT}
                         onSubmitEditing={onSubmit}
                         shouldUseDisabledStyles={false}
-                        textInputContainerStyles={[styles.borderNone, styles.pb0, styles.pr3]}
+                        textInputContainerStyles={[styles.borderNone, styles.pb0, textInputContainerStyles]}
                         inputStyle={[inputWidth, styles.pl3, styles.pr3]}
                         onFocus={() => {
                             setIsFocused(true);

src/components/Search/SearchInputSelectionWrapper/index.tsx

@@ -3,11 +3,14 @@ import React, {forwardRef} from 'react';
 import SearchAutocompleteInput from '@components/Search/SearchAutocompleteInput';
 import type {SearchAutocompleteInputProps} from '@components/Search/SearchAutocompleteInput';
 import type {BaseTextInputRef} from '@components/TextInput/BaseTextInput/types';
+import useThemeStyles from '@hooks/useThemeStyles';
 
 function SearchInputSelectionWrapper({selection, ...props}: SearchAutocompleteInputProps, ref: ForwardedRef<BaseTextInputRef>) {
+    const styles = useThemeStyles();
     return (
         <SearchAutocompleteInput
             selection={selection}
+            textInputContainerStyles={styles.pr3}
             ref={ref}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}