Fixing truncation and alignment in the network toggle component

[georgewrmarshall]

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

before.mov

After

after.mov

Related issues

Fixes #21369

Pre-merge author checklist

• I’ve followed MetaMask Coding Standards.
• I've clearly explained:
  • What problem this PR is solving.
  • How this problem was solved.
  • How reviewers can test my changes.
• I’ve indicated what issue this PR is linked to: Fixes [Bug]: Inconsistent toggle alignments breaking UI #21369
• I’ve included tests if applicable.
• I’ve documented any added code.
• I’ve applied the right labels on the PR (see labeling guidelines).
• I’ve properly set the pull request status:
  • In case it's not yet "ready for review", I've set it to "draft".
  • 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.

[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.

[metamaskbot]

Builds ready [8343fec]

• builds: chrome, firefox
• builds (beta): chrome
• builds (flask): chrome, firefox
• builds (MMI): chrome, firefox
• builds (test): chrome, firefox
• builds (test-flask): chrome, firefox
• build viz: Build System
• mv3: Background Module Init Stats
• mv3: UI Init Stats
• mv3: Module Load Stats
• mv3: Bundle Size Stats
• mv2: E2e Actions Stats
• code coverage: Report
• storybook: Storybook
• typescript migration: Dashboard
• all artifacts
• bundle viz:

  • background: 0, 1, 2, 3, 4
  • common: 0, 1, 2, 3, 4, 5, 6
  • content-script: 0
  • contentscript: contentscript
  • disable-console: disable-console
  • inpage: inpage
  • policy-load: policy-load
  • sentry-install: sentry-install
  • ui: 0, 1, 10, 11, 12, 2, 3, 4, 5, 6, 7, 8, 9

Page Load Metrics (1199 ± 384 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	84	164	120	23	11
		domContentLoaded	84	163	110	24	12
		load	102	2113	1199	800	384
		domInteractive	84	163	110	24	12

Bundle size diffs

• background: 0 Bytes (0.00%)
• ui: 284 Bytes (0.00%)
• common: 0 Bytes (0.00%)

[codecov]

Codecov Report

Attention: 1 lines in your changes are missing coverage. Please review.

Comparison is base (8646a76) 68.58% compared to head (8343fec) 68.58%.
Report is 2 commits behind head on develop.

Additional details and impacted files

@@           Coverage Diff            @@
##           develop   #21370   +/-   ##
========================================
  Coverage    68.58%   68.58%           
========================================
  Files         1026     1026           
  Lines        40978    40978           
  Branches     10936    10936           
========================================
  Hits         28104    28104           
  Misses       12874    12874           

Files	Coverage Δ
.../app/incoming-trasaction-toggle/network-toggle.tsx	93.75% <66.67%> (ø)

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[NidhiKJha]

LGTM!

• Verified in storybook
• Verified in extension