[Bug]: Inconsistent toggle alignments breaking UI #21369
Assignees
Labels
regression-prod-11.1.2
release-11.5.0
Issue or pull request that will be included in release 11.5.0
type-bug
Comments
14 tasks
georgewrmarshall
added a commit
that referenced
this issue
Oct 13, 2023
## **Description** Currently there is some truncation issues with long network names in the privacy incoming transactions section. The truncation of the text is not working which results in broken UI for longer network names This PR adds some styles which resolve the issue as well as adding a story for the network-toggle component for easier revision and review ## **Manual testing steps** _1. Open the storybook build on this PR _2. Search `NetworkToggle` and check the story in small screen sizes _3. Pull this branch _4. Go to Settings > Security & privacy > Incoming transactions section ## **Screenshots/Recordings** ### **Before** https://github.com/MetaMask/metamask-extension/assets/8112138/9a7028ca-f70a-4833-94db-75e81b791206 ### **After** https://github.com/MetaMask/metamask-extension/assets/8112138/770cb8c7-f8ba-4a40-b941-1115bcbdd83c ## **Related issues** _Fixes #21369_ ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've clearly explained: - [x] What problem this PR is solving. - [x] How this problem was solved. - [x] How reviewers can test my changes. - [x] I’ve indicated what issue this PR is linked to: Fixes #21369 - [x] I’ve included tests if applicable. - [x] I’ve documented any added code. - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). - [x] I’ve properly set the pull request status: - [x] In case it's not yet "ready for review", I've set it to "draft". - [x] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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.
metamaskbot
added
the
release-11.5.0
k-g-j
pushed a commit
that referenced
this issue
Nov 1, 2023
## **Description** Currently there is some truncation issues with long network names in the privacy incoming transactions section. The truncation of the text is not working which results in broken UI for longer network names This PR adds some styles which resolve the issue as well as adding a story for the network-toggle component for easier revision and review ## **Manual testing steps** _1. Open the storybook build on this PR _2. Search `NetworkToggle` and check the story in small screen sizes _3. Pull this branch _4. Go to Settings > Security & privacy > Incoming transactions section ## **Screenshots/Recordings** ### **Before** https://github.com/MetaMask/metamask-extension/assets/8112138/9a7028ca-f70a-4833-94db-75e81b791206 ### **After** https://github.com/MetaMask/metamask-extension/assets/8112138/770cb8c7-f8ba-4a40-b941-1115bcbdd83c ## **Related issues** _Fixes #21369_ ## **Pre-merge author checklist** - [x] I’ve followed [MetaMask Coding Standards](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/CODING_GUIDELINES.md). - [x] I've clearly explained: - [x] What problem this PR is solving. - [x] How this problem was solved. - [x] How reviewers can test my changes. - [x] I’ve indicated what issue this PR is linked to: Fixes #21369 - [x] I’ve included tests if applicable. - [x] I’ve documented any added code. - [x] I’ve applied the right labels on the PR (see [labeling guidelines](https://github.com/MetaMask/metamask-extension/blob/develop/.github/guidelines/LABELING_GUIDELINES.md)). - [x] I’ve properly set the pull request status: - [x] In case it's not yet "ready for review", I've set it to "draft". - [x] In case it's "ready for review", I've changed it from "draft" to "non-draft". ## **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.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
noticed some inconsistent toggle alignments (seems to be affected by the length of the network’s name) in the settings > security & privacy > incoming transactions section. On v11.1.2:
https://consensys.slack.com/archives/G8RSKCNCD/p1697185807388299
Expected behavior
Content should truncate
Screenshots
Steps to reproduce
settings > security & privacy > incoming transactions section
Error messages or log output
No response
Version
11.1.2
Build type
None
Browser
Chrome
Operating system
MacOS
Hardware wallet
No response
Additional context
No response
Severity
low
The text was updated successfully, but these errors were encountered: