From 3fc95b26abdc844e5a89086f65cc0a8442ef042b Mon Sep 17 00:00:00 2001
From: Xiaoming Wang <7315988+dawnseeker8@users.noreply.github.com>
Date: Wed, 16 Oct 2024 16:35:11 +0800
Subject: [PATCH] fix: ledger sign message screen, legacy account with legacy
 path will push balance information outside the border of screen. (#11550)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

<!--
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**
When import a ledger legacy account in Metamask, and user go to click
`Personal Sign` . sometimes the balance is out of border of the personal
sign screen, please see the attached screen image for detail.

This PR fix the layout issue to put the account label below the account
name so that in smaller screen, account balance will not be put out of
box.

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

## **Related issues**

Fixes: #11522

## **Manual testing steps**

1. Install MM
2. Recover from SRP
3. Add Ledger hardware wallet and connect Ledger 2x account
4. Launch MM test dapp
5. Connect Ledger legacy account on test dapp
6. Sign Permit with account

## **Screenshots/Recordings**

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

### **Before**

![image](https://github.com/user-attachments/assets/1c4173e4-52ad-4304-8306-a0f54bf42ad4)

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

### **After**

![image](https://github.com/user-attachments/assets/84f41566-74ee-4026-83bc-c80f028c7cb8)


![image](https://github.com/user-attachments/assets/117defc2-a45d-4b8c-9110-c0a2007719d8)


<!-- [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**

- [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.
---
 .../Accounts/AccountBase/AccountBase.styles.ts            | 1 -
 .../components-temp/Accounts/AccountBase/AccountBase.tsx  | 8 +++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/app/component-library/components-temp/Accounts/AccountBase/AccountBase.styles.ts b/app/component-library/components-temp/Accounts/AccountBase/AccountBase.styles.ts
index cda7d7fe248..f755c07b3eb 100644
--- a/app/component-library/components-temp/Accounts/AccountBase/AccountBase.styles.ts
+++ b/app/component-library/components-temp/Accounts/AccountBase/AccountBase.styles.ts
@@ -29,7 +29,6 @@ const styleSheet = StyleSheet.create({
     justifyContent: 'flex-start',
   },
   accountNameLabelText: {
-    marginLeft: 4,
     paddingHorizontal: 8,
     borderWidth: 1,
     borderRadius: 8,
diff --git a/app/component-library/components-temp/Accounts/AccountBase/AccountBase.tsx b/app/component-library/components-temp/Accounts/AccountBase/AccountBase.tsx
index 14f619c98e0..88e0f809d05 100644
--- a/app/component-library/components-temp/Accounts/AccountBase/AccountBase.tsx
+++ b/app/component-library/components-temp/Accounts/AccountBase/AccountBase.tsx
@@ -49,15 +49,17 @@ const AccountBase = ({
 
         <View style={styles.accountNameLabel}>
           <Text variant={TextVariant.BodyMDBold}>{accountName}</Text>
-          {accountTypeLabel && (
+        </View>
+        {accountTypeLabel && (
+          <View style={styles.accountNameLabel}>
             <Text
-              variant={TextVariant.BodySM}
+              variant={TextVariant.BodyMDBold}
               style={styles.accountNameLabelText}
             >
               {strings(accountTypeLabel)}
             </Text>
-          )}
         </View>
+        )}
       </View>
     </View>
     <View>