fix: add word-wrapping in the network url (#1469)

- Closes #1458

---

| 📷  Demo |
| --- |
| <img width="374" alt="Screenshot 2024-09-10 at 16 12 33"
src="https://github.com/user-attachments/assets/dc62f4f7-3d32-4ca0-b2a6-6d3b60202e21">
|

.changeset/fair-berries-fix.md

@@ -0,0 +1,5 @@
+---
+"fuels-wallet": patch
+---
+
+Fix long network URLs breaking layout by enabling word wrapping.

package.json

@@ -120,7 +120,9 @@
       "elliptic@>=4.0.0 <=6.5.6": ">=6.5.7",
       "elliptic@>=2.0.0 <=6.5.6": ">=6.5.7",
       "elliptic@>=5.2.1 <=6.5.6": ">=6.5.7",
-      "micromatch@<4.0.8": ">=4.0.8"
+      "micromatch@<4.0.8": ">=4.0.8",
+      "send@<0.19.0": ">=0.19.0",
+      "serve-static@<1.16.0": ">=1.16.0"
     }
   }
 }

packages/app/src/systems/Network/components/NetworkReviewCard/NetworkReviewCard.tsx

@@ -30,7 +30,9 @@ export function NetworkReviewCard({
       </Card.Header>
       <Card.Body css={styles.cardContentSection}>
         <Text as="h2">{name}</Text>
-        <Text fontSize="sm">{url}</Text>
+        <Text fontSize="sm" css={styles.url}>
+          {url}
+        </Text>
       </Card.Body>
     </MotionCard>
   );
@@ -46,6 +48,9 @@ const styles = {
       height: '$6',
     },
   }),
+  url: cssObj({
+    wordWrap: 'break-word',
+  }),
   cardContentSection: cssObj({
     py: '$2',
   }),