Fixing truncation and alignment in the network toggle component (#21370)

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

ui/components/app/app-components.scss

@@ -49,6 +49,7 @@
 @import 'multilayer-fee-message/index';
 @import 'multiple-notifications/index';
 @import 'network-display/index';
+@import 'ui/components/app/incoming-trasaction-toggle/network-toggle';
 @import 'permission-page-container/index';
 @import 'permissions-connect-footer/index';
 @import 'permissions-connect-header/index';

ui/components/app/incoming-trasaction-toggle/network-toggle.scss

@@ -0,0 +1,5 @@
+.network-toggle-wrapper {
+  &__overflow-container {
+    overflow: hidden;
+  }
+}

ui/components/app/incoming-trasaction-toggle/network-toggle.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { StoryFn, Meta } from '@storybook/react';
+import NetworkToggle from './network-toggle';
+
+export default {
+  title: 'Components/App/IncomingTransactionToggle/NetworkToggle',
+  component: NetworkToggle,
+  argTypes: {
+    chainId: {
+      control: 'text',
+    },
+    networkPreferences: {
+      control: 'object',
+    },
+    toggleSingleNetwork: {
+      action: 'toggleSingleNetwork',
+    },
+  },
+  args: {
+    networkPreferences: {
+      isShowIncomingTransactions: true,
+      label: 'Ethereum or long network name',
+      imageUrl: './images/ethereum.svg',
+    },
+    chainId: '0x1',
+  },
+} as Meta<typeof NetworkToggle>;
+
+export const DefaultStory: StoryFn<typeof NetworkToggle> = (args) => (
+  <NetworkToggle {...args} />
+);
+
+DefaultStory.storyName = 'Default';

ui/components/app/incoming-trasaction-toggle/network-toggle.tsx

@@ -61,44 +61,56 @@ const NetworkToggle = ({
       marginBottom={6}
       display={Display.Flex}
       flexDirection={FlexDirection.Row}
+      gap={4}
       justifyContent={JustifyContent.spaceBetween}
       data-testid={`network-toggle-${chainId}`}
       className="network-toggle-wrapper"
     >
       <Box
-        gap={2}
         backgroundColor={BackgroundColor.transparent}
         display={Display.Flex}
         alignItems={AlignItems.center}
         width={BlockSize.Full}
+        gap={4}
+        className="network-toggle-wrapper__overflow-container"
       >
         <AvatarNetwork
           size={AvatarNetworkSize.Sm}
           src={networkPreferences.imageUrl}
           name={networkName}
         />
-        <Box display={Display.Flex} flexDirection={FlexDirection.Column}>
-          <Text
-            color={TextColor.textDefault}
-            backgroundColor={BackgroundColor.transparent}
-            variant={TextVariant.bodyMd}
-            ellipsis
-            marginLeft={2}
-          >
-            {networkName.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? (
-              <Tooltip title={networkName} position="bottom">
+        <Box
+          display={Display.Flex}
+          flexDirection={FlexDirection.Column}
+          className="network-toggle-wrapper__overflow-container"
+        >
+          {networkName.length > MAXIMUM_CHARACTERS_WITHOUT_TOOLTIP ? (
+            <Tooltip position="bottom">
+              <Text
+                color={TextColor.textDefault}
+                backgroundColor={BackgroundColor.transparent}
+                variant={TextVariant.bodyMd}
+                ellipsis
+              >
                 {networkName}
-              </Tooltip>
-            ) : (
-              networkName
-            )}
-          </Text>
+              </Text>
+            </Tooltip>
+          ) : (
+            <Text
+              color={TextColor.textDefault}
+              backgroundColor={BackgroundColor.transparent}
+              variant={TextVariant.bodyMd}
+              ellipsis
+            >
+              {networkName}
+            </Text>
+          )}
+
           <Text
             color={TextColor.primaryDefault}
             backgroundColor={BackgroundColor.transparent}
             variant={TextVariant.bodySm}
             ellipsis
-            marginLeft={2}
           >
             {
               // For tests, we have localhost in the network list, but obviously
@@ -118,13 +130,14 @@ const NetworkToggle = ({
           </Text>
         </Box>
       </Box>
-
-      <ToggleButton
-        value={isShowIncomingTransactions}
-        onToggle={(value) => toggleSingleNetwork(chainId, !value)}
-        offLabel={t('off')}
-        onLabel={t('on')}
-      />
+      <Box marginLeft="auto">
+        <ToggleButton
+          value={isShowIncomingTransactions}
+          onToggle={(value) => toggleSingleNetwork(chainId, !value)}
+          offLabel={t('off')}
+          onLabel={t('on')}
+        />
+      </Box>
     </Box>
   );
 };