From 675c08c903833e132abd892b2801b439e0bfd3f1 Mon Sep 17 00:00:00 2001
From: krishna2323 <belivethatkg@gmail.com>
Date: Wed, 28 May 2025 21:50:48 +0530
Subject: [PATCH 1/6] fix: Clear/calendar button is aligned to top instead of
 in the middle of input modal.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>
---
 .../BaseTextInput/implementation/index.native.tsx | 13 ++++++++++---
 .../BaseTextInput/implementation/index.tsx        | 15 +++++++++++----
 .../TextInput/TextInputClearButton/index.tsx      |  6 ++++--
 src/styles/index.ts                               |  5 -----
 src/styles/utils/index.ts                         |  8 ++++++++
 5 files changed, 33 insertions(+), 14 deletions(-)

diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
index c97cd5981855..27183a4f0570 100644
--- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
+++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
@@ -421,6 +421,7 @@ function BaseTextInput(
                             )}
                             {((isFocused && !isReadOnly && shouldShowClearButton) || !shouldHideClearButton) && !!value && (
                                 <TextInputClearButton
+                                    containerStyles={[StyleUtils.getTextInputIconContainerStyles(hasLabel, false)]}
                                     onPressButton={() => {
                                         setValue('');
                                         onClearInput?.();
@@ -431,12 +432,18 @@ function BaseTextInput(
                                 <ActivityIndicator
                                     size="small"
                                     color={theme.iconSuccessFill}
-                                    style={[styles.mt2, styles.ml1, styles.justifyContentStart, loadingSpinnerStyle, StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0)]}
+                                    style={[
+                                        StyleUtils.getTextInputIconContainerStyles(hasLabel, false),
+                                        styles.ml1,
+                                        styles.justifyContentStart,
+                                        loadingSpinnerStyle,
+                                        StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0),
+                                    ]}
                                 />
                             )}
                             {!!inputProps.secureTextEntry && (
                                 <Checkbox
-                                    style={[styles.flex1, styles.textInputIconContainer]}
+                                    style={[styles.flex1, StyleUtils.getTextInputIconContainerStyles(hasLabel)]}
                                     onPress={togglePasswordVisibility}
                                     onMouseDown={(event) => {
                                         event.preventDefault();
@@ -450,7 +457,7 @@ function BaseTextInput(
                                 </Checkbox>
                             )}
                             {!inputProps.secureTextEntry && !!icon && (
-                                <View style={[styles.textInputIconContainer, !isReadOnly ? styles.cursorPointer : styles.pointerEventsNone, iconContainerStyle]}>
+                                <View style={[StyleUtils.getTextInputIconContainerStyles(hasLabel), !isReadOnly ? styles.cursorPointer : styles.pointerEventsNone, iconContainerStyle]}>
                                     <Icon
                                         src={icon}
                                         fill={theme.icon}
diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx
index e9b7bb7d2b13..55572d5c584c 100644
--- a/src/components/TextInput/BaseTextInput/implementation/index.tsx
+++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx
@@ -449,6 +449,7 @@ function BaseTextInput(
                                     }}
                                 >
                                     <TextInputClearButton
+                                        containerStyles={[StyleUtils.getTextInputIconContainerStyles(hasLabel, false)]}
                                         onPressButton={() => {
                                             setValue('');
                                             onClearInput?.();
@@ -456,16 +457,22 @@ function BaseTextInput(
                                     />
                                 </View>
                             )}
-                            {inputProps.isLoading !== undefined && (
+                            {inputProps.isLoading === undefined && (
                                 <ActivityIndicator
                                     size="small"
                                     color={theme.iconSuccessFill}
-                                    style={[styles.mt2, styles.ml1, styles.justifyContentStart, loadingSpinnerStyle, StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0)]}
+                                    style={[
+                                        StyleUtils.getTextInputIconContainerStyles(hasLabel, false),
+                                        styles.ml1,
+                                        styles.justifyContentStart,
+                                        loadingSpinnerStyle,
+                                        StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 1),
+                                    ]}
                                 />
                             )}
                             {!!inputProps.secureTextEntry && (
                                 <Checkbox
-                                    style={[styles.flex1, styles.textInputIconContainer]}
+                                    style={[styles.flex1, StyleUtils.getTextInputIconContainerStyles(hasLabel)]}
                                     onPress={togglePasswordVisibility}
                                     onMouseDown={(e) => {
                                         e.preventDefault();
@@ -479,7 +486,7 @@ function BaseTextInput(
                                 </Checkbox>
                             )}
                             {!inputProps.secureTextEntry && !!icon && (
-                                <View style={[styles.textInputIconContainer, !isReadOnly ? styles.cursorPointer : styles.pointerEventsNone, iconContainerStyle]}>
+                                <View style={[StyleUtils.getTextInputIconContainerStyles(hasLabel), !isReadOnly ? styles.cursorPointer : styles.pointerEventsNone, iconContainerStyle]}>
                                     <Icon
                                         src={icon}
                                         fill={theme.icon}
diff --git a/src/components/TextInput/TextInputClearButton/index.tsx b/src/components/TextInput/TextInputClearButton/index.tsx
index 68fda83713f2..537d832becdf 100644
--- a/src/components/TextInput/TextInputClearButton/index.tsx
+++ b/src/components/TextInput/TextInputClearButton/index.tsx
@@ -1,4 +1,5 @@
 import React from 'react';
+import type {ViewStyle} from 'react-native';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
 import {PressableWithoutFeedback} from '@components/Pressable';
@@ -10,16 +11,17 @@ import CONST from '@src/CONST';
 
 type TextInputClearButtonProps = {
     onPressButton: () => void;
+    containerStyles?: ViewStyle[];
 };
 
-function TextInputClearButton({onPressButton}: TextInputClearButtonProps) {
+function TextInputClearButton({onPressButton, containerStyles}: TextInputClearButtonProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {translate} = useLocalize();
     return (
         <Tooltip text={translate('common.clear')}>
             <PressableWithoutFeedback
-                style={[styles.mt2, styles.ml1]}
+                style={[styles.mt2, styles.ml1, containerStyles]}
                 accessibilityRole={CONST.ROLE.BUTTON}
                 accessibilityLabel={translate('common.clear')}
                 onMouseDown={(e) => {
diff --git a/src/styles/index.ts b/src/styles/index.ts
index b6cda7efedeb..68ee7c963fb1 100644
--- a/src/styles/index.ts
+++ b/src/styles/index.ts
@@ -1390,11 +1390,6 @@ const styles = (theme: ThemeColors) =>
 
         textInputDesktop: addOutlineWidth(theme, {}, 0),
 
-        textInputIconContainer: {
-            paddingHorizontal: 11,
-            marginTop: 8,
-        },
-
         textInputLeftIconContainer: {
             justifyContent: 'center',
             paddingRight: 8,
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index d7e69d3651a0..afcfe5f7ea70 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1339,6 +1339,14 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         return maxAutoGrowHeight ? {maxHeight: maxAutoGrowHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth * 2} : {};
     },
 
+    getTextInputIconContainerStyles: (hasLabel: boolean, includePadding = true) => {
+        const paddingStyle = includePadding ? {paddingHorizontal: 11} : {};
+        return {
+            ...paddingStyle,
+            marginTop: hasLabel ? 8 : 16,
+        };
+    },
+
     /**
      * Return the style from an avatar size constant
      */

From fcb32ac96c4fa3d4ebbcd3101e0ad0a025265eca Mon Sep 17 00:00:00 2001
From: krishna2323 <belivethatkg@gmail.com>
Date: Wed, 28 May 2025 22:01:15 +0530
Subject: [PATCH 2/6] minor fix.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>
---
 .../TextInput/BaseTextInput/implementation/index.tsx          | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx
index 55572d5c584c..38796a653801 100644
--- a/src/components/TextInput/BaseTextInput/implementation/index.tsx
+++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx
@@ -457,7 +457,7 @@ function BaseTextInput(
                                     />
                                 </View>
                             )}
-                            {inputProps.isLoading === undefined && (
+                            {inputProps.isLoading !== undefined && (
                                 <ActivityIndicator
                                     size="small"
                                     color={theme.iconSuccessFill}
@@ -466,7 +466,7 @@ function BaseTextInput(
                                         styles.ml1,
                                         styles.justifyContentStart,
                                         loadingSpinnerStyle,
-                                        StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 1),
+                                        StyleUtils.getOpacityStyle(inputProps.isLoading ? 1 : 0),
                                     ]}
                                 />
                             )}

From 0c90db652feb88e85737c917a24778ffc673f5be Mon Sep 17 00:00:00 2001
From: krishna2323 <belivethatkg@gmail.com>
Date: Wed, 28 May 2025 22:11:00 +0530
Subject: [PATCH 3/6] fix: No padding between the subtitle & the text inputs in
 people you may know modal.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>
---
 .../OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx b/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
index be15bf44326a..797f89df8ab1 100644
--- a/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
+++ b/src/pages/OnboardingPrivateDomain/BaseOnboardingPrivateDomain.tsx
@@ -73,7 +73,7 @@ function BaseOnboardingPrivateDomain({shouldUseNativeStyles, route}: BaseOnboard
             <View style={[styles.flex1, onboardingIsMediumOrLargerScreenWidth && styles.mt5, onboardingIsMediumOrLargerScreenWidth ? styles.mh8 : styles.mh5, styles.justifyContentBetween]}>
                 <View style={[styles.flexGrow1, styles.mb5]}>
                     <Text style={styles.textHeadlineH1}>{translate('onboarding.peopleYouMayKnow')}</Text>
-                    <Text style={[styles.textAlignLeft, styles.mt5]}>{translate('onboarding.workspaceYouMayJoin', {domain, email})}</Text>
+                    <Text style={[styles.textAlignLeft, styles.mv5]}>{translate('onboarding.workspaceYouMayJoin', {domain, email})}</Text>
                     <ValidateCodeForm
                         validateCodeActionErrorField="getAccessiblePolicies"
                         handleSubmitForm={(code) => {

From bb662488024c0fc4696eecbf648f919dd6d66601 Mon Sep 17 00:00:00 2001
From: krishna2323 <belivethatkg@gmail.com>
Date: Wed, 28 May 2025 22:44:46 +0530
Subject: [PATCH 4/6] fix: Status - There is spacing after hours in time input
 page.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>
---
 src/components/AmountTextInput.tsx                           | 5 ++---
 .../TextInput/BaseTextInput/implementation/index.native.tsx  | 4 +++-
 .../TextInput/BaseTextInput/implementation/index.tsx         | 5 ++++-
 src/components/TextInput/BaseTextInput/types.ts              | 3 +++
 4 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx
index 501a92a0bcdd..fa41a73a6f08 100644
--- a/src/components/AmountTextInput.tsx
+++ b/src/components/AmountTextInput.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import type {ForwardedRef} from 'react';
 import type {NativeSyntheticEvent, StyleProp, TextInputKeyPressEventData, TextInputSelectionChangeEventData, TextStyle, ViewStyle} from 'react-native';
-import useThemeStyles from '@hooks/useThemeStyles';
 import CONST from '@src/CONST';
 import type {TextSelection} from './Composer/types';
 import TextInput from './TextInput';
@@ -59,7 +58,6 @@ function AmountTextInput(
     }: AmountTextInputProps,
     ref: ForwardedRef<BaseTextInputRef>,
 ) {
-    const styles = useThemeStyles();
     return (
         <TextInput
             autoGrow
@@ -67,7 +65,8 @@ function AmountTextInput(
             shouldInterceptSwipe
             disableKeyboard={disableKeyboard}
             inputStyle={style}
-            textInputContainerStyles={[styles.p0, containerStyle]}
+            textInputContainerStyles={[containerStyle]}
+            shouldApplyPaddingToContainer={false}
             onChangeText={onChangeAmount}
             ref={ref}
             value={formattedAmount}
diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
index 27183a4f0570..a941a325ceb3 100644
--- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
+++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
@@ -43,6 +43,7 @@ function BaseTextInput(
         iconLeft = null,
         icon = null,
         textInputContainerStyles,
+        shouldApplyPaddingToContainer,
         touchableInputWrapperStyle,
         containerStyles,
         inputStyle,
@@ -261,8 +262,9 @@ function BaseTextInput(
     const placeholderValue = !!prefixCharacter || !!suffixCharacter || isFocused || !hasLabel || (hasLabel && forceActiveLabel) ? placeholder : undefined;
     const newTextInputContainerStyles: StyleProp<ViewStyle> = StyleSheet.flatten([
         styles.textInputContainer,
+        !shouldApplyPaddingToContainer && styles.p0,
         textInputContainerStyles,
-        !!contentWidth && StyleUtils.getWidthStyle(textInputWidth + styles.textInputContainer.padding * 2),
+        !!contentWidth && StyleUtils.getWidthStyle(textInputWidth + (shouldApplyPaddingToContainer ? styles.textInputContainer.padding * 2 : 0)),
         autoGrow && StyleUtils.getAutoGrowWidthInputContainerStyles(textInputWidth, autoGrowExtraSpace, autoGrowMarginSide),
         !hideFocusedState && isFocused && styles.borderColorFocus,
         (!!hasError || !!errorText) && styles.borderColorDanger,
diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx
index 38796a653801..4032ccfc4b16 100644
--- a/src/components/TextInput/BaseTextInput/implementation/index.tsx
+++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx
@@ -46,6 +46,7 @@ function BaseTextInput(
         icon = null,
         iconLeft = null,
         textInputContainerStyles,
+        shouldApplyPaddingToContainer = true,
         touchableInputWrapperStyle,
         containerStyles,
         inputStyle,
@@ -264,10 +265,12 @@ function BaseTextInput(
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing
     const inputHelpText = errorText || hint;
     const newPlaceholder = !!prefixCharacter || !!suffixCharacter || isFocused || !hasLabel || (hasLabel && forceActiveLabel) ? placeholder : undefined;
+
     const newTextInputContainerStyles: StyleProp<ViewStyle> = StyleSheet.flatten([
         styles.textInputContainer,
+        !shouldApplyPaddingToContainer && styles.p0,
         textInputContainerStyles,
-        (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth + styles.textInputContainer.padding * 2),
+        (autoGrow || !!contentWidth) && StyleUtils.getWidthStyle(textInputWidth + (shouldApplyPaddingToContainer ? styles.textInputContainer.padding * 2 : 0)),
         !hideFocusedState && isFocused && styles.borderColorFocus,
         (!!hasError || !!errorText) && styles.borderColorDanger,
         autoGrowHeight && {scrollPaddingTop: typeof maxAutoGrowHeight === 'number' ? 2 * maxAutoGrowHeight : undefined},
diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts
index 21b82ffd7e2a..18bd739fc8e4 100644
--- a/src/components/TextInput/BaseTextInput/types.ts
+++ b/src/components/TextInput/BaseTextInput/types.ts
@@ -33,6 +33,9 @@ type CustomBaseTextInputProps = {
     /** Customize the TextInput container */
     textInputContainerStyles?: StyleProp<ViewStyle>;
 
+    /** Whether to apply padding to the input */
+    shouldApplyPaddingToContainer?: boolean;
+
     /** Customizes the touchable wrapper of the TextInput component */
     touchableInputWrapperStyle?: StyleProp<ViewStyle>;
 

From 76ff95c641a320be11b49d460de9a1150b9951fe Mon Sep 17 00:00:00 2001
From: krishna2323 <belivethatkg@gmail.com>
Date: Wed, 28 May 2025 23:20:30 +0530
Subject: [PATCH 5/6] fix: Placeholders for the new text inputs are not
 centered in Test drive screen.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>
---
 src/components/Search/SearchAutocompleteInput.tsx         | 2 +-
 .../BaseTextInput/implementation/index.native.tsx         | 8 ++++----
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/Search/SearchAutocompleteInput.tsx b/src/components/Search/SearchAutocompleteInput.tsx
index 83e4a9996dd6..0be67d09a3a8 100644
--- a/src/components/Search/SearchAutocompleteInput.tsx
+++ b/src/components/Search/SearchAutocompleteInput.tsx
@@ -207,7 +207,7 @@ function SearchAutocompleteInput(
                         onSubmitEditing={onSubmit}
                         shouldUseDisabledStyles={false}
                         textInputContainerStyles={[styles.borderNone, styles.pb0, styles.pl3]}
-                        inputStyle={[inputWidth]}
+                        inputStyle={[inputWidth, styles.lineHeightUndefined]}
                         placeholderTextColor={theme.textSupporting}
                         onFocus={() => {
                             onFocus?.();
diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
index a941a325ceb3..6fc6a6c58cf0 100644
--- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
+++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
@@ -43,7 +43,7 @@ function BaseTextInput(
         iconLeft = null,
         icon = null,
         textInputContainerStyles,
-        shouldApplyPaddingToContainer,
+        shouldApplyPaddingToContainer = true,
         touchableInputWrapperStyle,
         containerStyles,
         inputStyle,
@@ -112,6 +112,7 @@ function BaseTextInput(
     const labelTranslateY = useSharedValue<number>(initialActiveLabel ? styleConst.ACTIVE_LABEL_TRANSLATE_Y : styleConst.INACTIVE_LABEL_TRANSLATE_Y);
     const input = useRef<TextInput | null>(null);
     const isLabelActive = useRef(initialActiveLabel);
+    const hasLabel = !!label?.length;
 
     useHtmlPaste(input, undefined, isMarkdownEnabled);
 
@@ -190,10 +191,10 @@ function BaseTextInput(
 
             setWidth((prevWidth: number | null) => (autoGrowHeight ? layout.width : prevWidth));
             setHeight((prevHeight: number) =>
-                !multiline ? layout.height + heightToFitEmojis - (styles.textInputContainer.padding + styles.textInputContainer.borderWidth * 2) : prevHeight,
+                !multiline ? layout.height + heightToFitEmojis - ((hasLabel ? styles.textInputContainer.padding : 0) + styles.textInputContainer.borderWidth * 2) : prevHeight,
             );
         },
-        [autoGrowHeight, multiline, styles.textInputContainer],
+        [autoGrowHeight, multiline, styles.textInputContainer, hasLabel],
     );
 
     // The ref is needed when the component is uncontrolled and we don't have a value prop
@@ -254,7 +255,6 @@ function BaseTextInput(
     }, []);
 
     const shouldAddPaddingBottom = autoGrowHeight && !isAutoGrowHeightMarkdown && textInputHeight > variables.componentSizeLarge;
-    const hasLabel = !!label?.length;
     const isReadOnly = inputProps.readOnly ?? inputProps.disabled;
     // Disabling this line for safeness as nullish coalescing works only if the value is undefined or null, and errorText can be an empty string
     // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing

From e39795f7d1f099c4629e5393ef3ca6b6918f4ea4 Mon Sep 17 00:00:00 2001
From: krishna2323 <belivethatkg@gmail.com>
Date: Thu, 29 May 2025 04:11:28 +0530
Subject: [PATCH 6/6] minor updates.

Signed-off-by: krishna2323 <belivethatkg@gmail.com>
---
 src/components/AmountTextInput.tsx                        | 2 +-
 .../BaseTextInput/implementation/index.native.tsx         | 8 ++++----
 .../TextInput/BaseTextInput/implementation/index.tsx      | 2 +-
 src/components/TextInput/BaseTextInput/types.ts           | 2 +-
 src/styles/utils/index.ts                                 | 4 ++++
 5 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/components/AmountTextInput.tsx b/src/components/AmountTextInput.tsx
index fa41a73a6f08..e5b107c053a5 100644
--- a/src/components/AmountTextInput.tsx
+++ b/src/components/AmountTextInput.tsx
@@ -65,7 +65,7 @@ function AmountTextInput(
             shouldInterceptSwipe
             disableKeyboard={disableKeyboard}
             inputStyle={style}
-            textInputContainerStyles={[containerStyle]}
+            textInputContainerStyles={containerStyle}
             shouldApplyPaddingToContainer={false}
             onChangeText={onChangeAmount}
             ref={ref}
diff --git a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
index 6fc6a6c58cf0..2ab29eff4211 100644
--- a/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
+++ b/src/components/TextInput/BaseTextInput/implementation/index.native.tsx
@@ -190,9 +190,9 @@ function BaseTextInput(
             const heightToFitEmojis = 1;
 
             setWidth((prevWidth: number | null) => (autoGrowHeight ? layout.width : prevWidth));
-            setHeight((prevHeight: number) =>
-                !multiline ? layout.height + heightToFitEmojis - ((hasLabel ? styles.textInputContainer.padding : 0) + styles.textInputContainer.borderWidth * 2) : prevHeight,
-            );
+            const borderWidth = styles.textInputContainer.borderWidth * 2;
+            const labelPadding = hasLabel ? styles.textInputContainer.padding : 0;
+            setHeight((prevHeight: number) => (!multiline ? layout.height + heightToFitEmojis - (labelPadding + borderWidth) : prevHeight));
         },
         [autoGrowHeight, multiline, styles.textInputContainer, hasLabel],
     );
@@ -445,7 +445,7 @@ function BaseTextInput(
                             )}
                             {!!inputProps.secureTextEntry && (
                                 <Checkbox
-                                    style={[styles.flex1, StyleUtils.getTextInputIconContainerStyles(hasLabel)]}
+                                    style={[StyleUtils.getTextInputIconContainerStyles(hasLabel)]}
                                     onPress={togglePasswordVisibility}
                                     onMouseDown={(event) => {
                                         event.preventDefault();
diff --git a/src/components/TextInput/BaseTextInput/implementation/index.tsx b/src/components/TextInput/BaseTextInput/implementation/index.tsx
index 4032ccfc4b16..519ccb458aac 100644
--- a/src/components/TextInput/BaseTextInput/implementation/index.tsx
+++ b/src/components/TextInput/BaseTextInput/implementation/index.tsx
@@ -475,7 +475,7 @@ function BaseTextInput(
                             )}
                             {!!inputProps.secureTextEntry && (
                                 <Checkbox
-                                    style={[styles.flex1, StyleUtils.getTextInputIconContainerStyles(hasLabel)]}
+                                    style={[StyleUtils.getTextInputIconContainerStyles(hasLabel)]}
                                     onPress={togglePasswordVisibility}
                                     onMouseDown={(e) => {
                                         e.preventDefault();
diff --git a/src/components/TextInput/BaseTextInput/types.ts b/src/components/TextInput/BaseTextInput/types.ts
index 18bd739fc8e4..5ab8a65233e9 100644
--- a/src/components/TextInput/BaseTextInput/types.ts
+++ b/src/components/TextInput/BaseTextInput/types.ts
@@ -33,7 +33,7 @@ type CustomBaseTextInputProps = {
     /** Customize the TextInput container */
     textInputContainerStyles?: StyleProp<ViewStyle>;
 
-    /** Whether to apply padding to the input */
+    /** Whether to apply padding to the input, some inputs doesn't require any padding, e.g. Amount input */
     shouldApplyPaddingToContainer?: boolean;
 
     /** Customizes the touchable wrapper of the TextInput component */
diff --git a/src/styles/utils/index.ts b/src/styles/utils/index.ts
index afcfe5f7ea70..8904466ac739 100644
--- a/src/styles/utils/index.ts
+++ b/src/styles/utils/index.ts
@@ -1339,6 +1339,10 @@ const createStyleUtils = (theme: ThemeColors, styles: ThemeStyles) => ({
         return maxAutoGrowHeight ? {maxHeight: maxAutoGrowHeight - styles.textInputMultilineContainer.paddingTop - styles.textInputContainer.borderWidth * 2} : {};
     },
 
+    /**
+     * Computes styles for the text input icon container.
+     * Applies horizontal padding if requested, and sets the top margin based on the presence of a label.
+     */
     getTextInputIconContainerStyles: (hasLabel: boolean, includePadding = true) => {
         const paddingStyle = includePadding ? {paddingHorizontal: 11} : {};
         return {
