chore(runway): cherry-pick fix: left aligned account picker in all cases for wallet homepage (#19617)

- fix: left aligned account picker in all cases for wallet homepage
(#19426)

<!--
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**
This PR updated the Wallet header to left aligned the AccountPicker for
when RemoveGNS is not available, providing more space for the
AccountPicker to render the account name

<!--
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?
-->

## **Changelog**

<!--
If this PR is not End-User-Facing and should not show up in the
CHANGELOG, you can choose to either:
1. Write `CHANGELOG entry: null`
2. Label with `no-changelog`

If this PR is End-User-Facing, please write a short User-Facing
description in the past tense like:
`CHANGELOG entry: Added a new tab for users to see their NFTs`
`CHANGELOG entry: Fixed a bug that was causing some NFTs to flicker`

(This helps the Release Engineer do their job more quickly and
accurately)
-->

CHANGELOG entry:

## **Related issues**

Fixes: #19409

## **Manual testing steps**

```gherkin
Feature: my feature name

  Scenario: user [verb for user action]
    Given [describe expected initial app state]

    When user [verb for user action]
    Then [describe expected outcome]
```

## **Screenshots/Recordings**

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

### **Before**
<img width="1290" height="2796" alt="Simulator Screenshot - iPhone 15
Pro Max - 2025-09-08 at 10 09 51"

src="https://github.com/user-attachments/assets/f9589c71-8e28-45f2-b67e-d0fe6b6cbcd2"
/>

<!-- [screenshots/recordings] -->

### **After**


https://github.com/user-attachments/assets/3d96d9af-40a5-4b86-9b5a-9bed254cc013

<!-- [screenshots/recordings] -->

## **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**

- [ ] I've manually tested the PR (e.g. pull and build branch, run the
app, test code being changed).
- [ ] 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.
[984c15b](984c15b)

Author: weitingsun

app/components/UI/Navbar/index.js

@@ -1004,6 +1004,9 @@ export function getWalletNavbarOptions(
       left: 12,
       right: 12,
     },
+    accountPickerStyle: {
+      marginRight: 16,
+    },
   });
 
   const onScanSuccess = (data, content) => {
@@ -1104,11 +1107,7 @@ export function getWalletNavbarOptions(
     header: () => (
       <HeaderBase
         includesTopInset
-        variant={
-          isFeatureFlagEnabled
-            ? HeaderBaseVariant.Display
-            : HeaderBaseVariant.Compact
-        }
+        variant={HeaderBaseVariant.Display}
         style={innerStyles.headerContainer}
         startAccessory={
           !isFeatureFlagEnabled && (
@@ -1193,6 +1192,7 @@ export function getWalletNavbarOptions(
           }}
           testID={WalletViewSelectorsIDs.ACCOUNT_ICON}
           hitSlop={innerStyles.touchAreaSlop}
+          style={innerStyles.accountPickerStyle}
         />
       </HeaderBase>
     ),

app/components/Views/Wallet/__snapshots__/index.test.tsx.snap

@@ -167,7 +167,7 @@ exports[`Wallet Conditional Rendering should render banner when basic functional
           <View
             style={
               {
-                "alignItems": "center",
+                "alignItems": "flex-start",
                 "flex": 1,
               }
             }
@@ -193,6 +193,7 @@ exports[`Wallet Conditional Rendering should render banner when basic functional
                   "borderRadius": 4,
                   "borderWidth": 0,
                   "flexDirection": "row",
+                  "marginRight": 16,
                   "padding": 16,
                 }
               }
@@ -1116,7 +1117,7 @@ exports[`Wallet Conditional Rendering should render loader when no selected acco
           <View
             style={
               {
-                "alignItems": "center",
+                "alignItems": "flex-start",
                 "flex": 1,
               }
             }
@@ -1142,6 +1143,7 @@ exports[`Wallet Conditional Rendering should render loader when no selected acco
                   "borderRadius": 4,
                   "borderWidth": 0,
                   "flexDirection": "row",
+                  "marginRight": 16,
                   "padding": 16,
                 }
               }
@@ -1983,7 +1985,7 @@ exports[`Wallet should render correctly 1`] = `
           <View
             style={
               {
-                "alignItems": "center",
+                "alignItems": "flex-start",
                 "flex": 1,
               }
             }
@@ -2009,6 +2011,7 @@ exports[`Wallet should render correctly 1`] = `
                   "borderRadius": 4,
                   "borderWidth": 0,
                   "flexDirection": "row",
+                  "marginRight": 16,
                   "padding": 16,
                 }
               }
@@ -2850,7 +2853,7 @@ exports[`Wallet should render correctly when Solana support is enabled 1`] = `
           <View
             style={
               {
-                "alignItems": "center",
+                "alignItems": "flex-start",
                 "flex": 1,
               }
             }
@@ -2876,6 +2879,7 @@ exports[`Wallet should render correctly when Solana support is enabled 1`] = `
                   "borderRadius": 4,
                   "borderWidth": 0,
                   "flexDirection": "row",
+                  "marginRight": 16,
                   "padding": 16,
                 }
               }
@@ -3717,7 +3721,7 @@ exports[`Wallet should render correctly when there are no detected tokens 1`] =
           <View
             style={
               {
-                "alignItems": "center",
+                "alignItems": "flex-start",
                 "flex": 1,
               }
             }
@@ -3743,6 +3747,7 @@ exports[`Wallet should render correctly when there are no detected tokens 1`] =
                   "borderRadius": 4,
                   "borderWidth": 0,
                   "flexDirection": "row",
+                  "marginRight": 16,
                   "padding": 16,
                 }
               }