fix: Fix padding on Android browser search (#12665)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

<!--
Write a short description of the changes included in this pull request,
also include relevant motivation and context. Have in mind the following
questions:
1. What is the reason for the change?
2. What is the improvement/solution?
-->

This PR fixes a padding issue on the BrowserUrlModal screen for Android

## **Related issues**

Fixes: Thread -
https://consensys.slack.com/archives/C02U025CVU4/p1733763228960359

## **Manual testing steps**

1. On Android, go to browser tab
2. Tap on the address bar
3. Notice that the search bar now respects the top notch for Android

## **Screenshots/Recordings**

<!-- If applicable, add screenshots and/or recordings to visualize the
before and after of your change. -->

### **Before**

<!-- [screenshots/recordings] -->
<img width="298" alt="image"
src="https://github.com/user-attachments/assets/46ca7f2e-8068-42f4-b887-8f1d4e8d810b"
/>


### **After**

<!-- [screenshots/recordings] -->
<img width="271" alt="image"
src="https://github.com/user-attachments/assets/911384e2-bc80-4274-8955-57a22b1ea12f"
/>


## **Pre-merge author checklist**

- [x] I’ve followed [MetaMask Contributor
Docs](https://github.com/MetaMask/contributor-docs) and [MetaMask Mobile
Coding
Standards](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/CODING_GUIDELINES.md).
- [x] I've completed the PR template to the best of my ability
- [x] I’ve included tests if applicable
- [x] I’ve documented my code using [JSDoc](https://jsdoc.app/) format
if applicable
- [x] I’ve applied the right labels on the PR (see [labeling
guidelines](https://github.com/MetaMask/metamask-mobile/blob/main/.github/guidelines/LABELING_GUIDELINES.md)).
Not required for external contributors.

## **Pre-merge reviewer checklist**

- [x] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [x] I confirm that this PR addresses all acceptance criteria described
in the ticket it closes and includes the necessary testing evidence such
as recordings and or screenshots.

Author: Cal-L

app/components/Views/BrowserUrlModal/BrowserUrlModal.tsx

@@ -20,6 +20,7 @@ import Routes from '../../../constants/navigation/Routes';
 import Device from '../../../util/device';
 
 import { BrowserURLBarSelectorsIDs } from '../../../../e2e/selectors/Browser/BrowserURLBar.selectors';
+import { SafeAreaView } from 'react-native-safe-area-context';
 export interface BrowserUrlParams {
   onUrlInputSubmit: (inputValue: string | undefined) => void;
   url: string | undefined;
@@ -72,7 +73,7 @@ const BrowserUrlModal = () => {
   );
 
   const renderContent = () => (
-    <>
+    <SafeAreaView style={styles.screen}>
       <View style={styles.urlModalContent}>
         <View style={styles.searchWrapper}>
           <TextInput
@@ -117,7 +118,7 @@ const BrowserUrlModal = () => {
         input={autocompleteValue}
         onDismiss={triggerClose}
       />
-    </>
+    </SafeAreaView>
   );
 
   return (

app/components/Views/BrowserUrlModal/__snapshots__/BrowserUrlModal.test.tsx.snap

@@ -9,81 +9,86 @@ exports[`BrowserUrlModal should render correctly 1`] = `
     }
   }
 >
-  <View
+  <RNCSafeAreaView
     style={
       {
         "backgroundColor": "#ffffff",
-        "flexDirection": "row",
-        "height": 87,
-        "paddingHorizontal": 10,
-        "paddingTop": 50,
+        "flex": 1,
       }
     }
   >
     <View
       style={
         {
-          "backgroundColor": "#f2f4f6",
-          "borderRadius": 30,
-          "flex": 1,
+          "alignItems": "center",
           "flexDirection": "row",
-          "height": 30,
+          "paddingHorizontal": 10,
         }
       }
     >
-      <TextInput
-        autoCapitalize="none"
-        autoCorrect={false}
-        autoFocus={true}
-        keyboardAppearance="light"
-        keyboardType="web-search"
-        onChangeText={[Function]}
-        onSubmitEditing={[Function]}
-        placeholder="Search or Type URL"
-        placeholderTextColor="#9fa6ae"
-        returnKeyType="go"
-        selectTextOnFocus={true}
+      <View
         style={
           {
-            "color": "#141618",
+            "backgroundColor": "#f2f4f6",
+            "borderRadius": 30,
             "flex": 1,
-            "fontFamily": "EuclidCircularB-Regular",
-            "fontSize": 14,
-            "fontWeight": "400",
-            "paddingLeft": 15,
+            "flexDirection": "row",
           }
         }
-        testID="browser-modal-url-input"
-      />
-    </View>
-    <TouchableOpacity
-      onPress={[Function]}
-      style={
-        {
-          "justifyContent": "center",
-          "marginLeft": 10,
-          "marginTop": -6,
-        }
-      }
-      testID="cancel-url-button"
-    >
-      <Text
+      >
+        <TextInput
+          autoCapitalize="none"
+          autoCorrect={false}
+          autoFocus={true}
+          keyboardAppearance="light"
+          keyboardType="web-search"
+          onChangeText={[Function]}
+          onSubmitEditing={[Function]}
+          placeholder="Search or Type URL"
+          placeholderTextColor="#9fa6ae"
+          returnKeyType="go"
+          selectTextOnFocus={true}
+          style={
+            {
+              "color": "#141618",
+              "flex": 1,
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontSize": 14,
+              "fontWeight": "400",
+              "paddingLeft": 15,
+              "paddingVertical": 6,
+            }
+          }
+          testID="browser-modal-url-input"
+        />
+      </View>
+      <TouchableOpacity
+        onPress={[Function]}
         style={
           {
-            "color": "#0376c9",
-            "fontFamily": "EuclidCircularB-Regular",
-            "fontSize": 14,
-            "fontWeight": "400",
+            "marginLeft": 10,
           }
         }
+        testID="cancel-url-button"
       >
-        Cancel
-      </Text>
-    </TouchableOpacity>
-  </View>
-  <Component
-    onDismiss={[Function]}
-    onSubmit={[Function]}
-  />
+        <Text
+          style={
+            {
+              "color": "#0376c9",
+              "fontFamily": "EuclidCircularB-Regular",
+              "fontSize": 14,
+              "fontWeight": "400",
+            }
+          }
+        >
+          Cancel
+        </Text>
+      </TouchableOpacity>
+    </View>
+    <Component
+      onDismiss={[Function]}
+      onSubmit={[Function]}
+    />
+  </RNCSafeAreaView>
 </ForwardRef>
 `;

app/components/Views/BrowserUrlModal/styles.ts

@@ -11,31 +11,24 @@ export const createStyles = (colors: any) =>
       flex: 1,
       backgroundColor: colors.background.default,
     },
-    urlModal: {
-      justifyContent: 'flex-start',
-      margin: 0,
-    },
     urlModalContent: {
       flexDirection: 'row',
-      paddingTop: Device.isAndroid() ? 10 : Device.isIphoneX() ? 50 : 27,
       paddingHorizontal: 10,
-      height: Device.isAndroid() ? 59 : Device.isIphoneX() ? 87 : 65,
-      backgroundColor: colors.background.default,
+      alignItems: 'center',
     },
     clearButton: { paddingHorizontal: 12, justifyContent: 'center' },
     urlInput: {
       ...fontStyles.normal,
       fontSize: Device.isAndroid() ? 16 : 14,
       paddingLeft: 15,
+      paddingVertical: 6,
       flex: 1,
       color: colors.text.default,
       // TODO: Replace "any" with type
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } as any,
     cancelButton: {
-      marginTop: -6,
       marginLeft: 10,
-      justifyContent: 'center',
     },
     cancelButtonText: {
       fontSize: 14,
@@ -48,7 +41,6 @@ export const createStyles = (colors: any) =>
       flexDirection: 'row',
       borderRadius: 30,
       backgroundColor: colors.background.alternative,
-      height: Device.isAndroid() ? 40 : 30,
       flex: 1,
     },
   });