fix: extra long network names

Author: infiniteflower

ui/pages/bridge/transaction-details/transaction-details.tsx

@@ -39,6 +39,8 @@ import {
   AlignItems,
   Display,
   FlexDirection,
+  FlexWrap,
+  JustifyContent,
   TextColor,
   TextTransform,
 } from '../../../helpers/constants/design-system';
@@ -367,6 +369,8 @@ const CrossChainSwapTxDetails = () => {
                     display={Display.Flex}
                     gap={1}
                     alignItems={AlignItems.center}
+                    flexWrap={FlexWrap.Wrap}
+                    justifyContent={JustifyContent.flexEnd}
                   >
                     {srcNetworkIconName}
                     <Icon name={IconName.Arrow2Right} size={IconSize.Sm} />
@@ -398,6 +402,8 @@ const CrossChainSwapTxDetails = () => {
                     display={Display.Flex}
                     gap={1}
                     alignItems={AlignItems.center}
+                    flexWrap={FlexWrap.Wrap}
+                    justifyContent={JustifyContent.flexEnd}
                   >
                     {t('bridgeTxDetailsTokenAmountOnChain', [
                       bridgeAmountSent,
@@ -414,6 +420,8 @@ const CrossChainSwapTxDetails = () => {
                     display={Display.Flex}
                     gap={1}
                     alignItems={AlignItems.center}
+                    flexWrap={FlexWrap.Wrap}
+                    justifyContent={JustifyContent.flexEnd}
                   >
                     {t('bridgeTxDetailsTokenAmountOnChain', [
                       bridgeAmountReceived,