fix: ledger sign message screen, legacy account with legacy path will push balance information outside the border of screen.

[dawnseeker8]

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.

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

Before

After

Pre-merge author checklist

• I’ve followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
• I've completed the PR template to the best of my ability
• I’ve included tests if applicable
• I’ve documented my code using JSDoc format if applicable
• I’ve applied the right labels on the PR (see labeling guidelines). 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.

[github-actions]

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

[github-actions]

Bitrise

❌❌❌ pr_smoke_e2e_pipeline failed on Bitrise! ❌❌❌

Commit hash: c0dde4f
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/f0940907-6bf5-41b7-b772-30b7235f0549

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

Tip

• Check the documentation if you have any doubts on how to understand the failure on bitrise

[github-actions]

Bitrise

✅✅✅ pr_smoke_e2e_pipeline passed on Bitrise! ✅✅✅

Commit hash: 3fda371
Build link: https://app.bitrise.io/app/be69d4368ee7e86d/pipelines/5a62f7a4-57b9-41d7-8213-45d02e2a82ec

Note

• You can kick off another pr_smoke_e2e_pipeline on Bitrise by removing and re-applying the Run Smoke E2E label on the pull request

[brianacnguyen]

Do you have a figma link for this? the margin change may not be approved by design

[dawnseeker8]

Do you have a figma link for this? the margin change may not be approved by design

I am waiting for @eriknson to approve on the layout change.

[SayaGT]

LGTM! We can go ahead with these changes as they leverage an existing pattern. These designs will soon be replaced with the new confirmation designs. You can find the relevant Figma here.

[sonarcloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarCloud