From c91b4ee95c5c95a693c181f95608d93682d778a9 Mon Sep 17 00:00:00 2001
From: Frederik Bolding <frederik.bolding@gmail.com>
Date: Sat, 21 Dec 2024 10:05:18 +0100
Subject: [PATCH] fix: Use `break-word` for Snaps UI text wrapping (#29387)

<!--
Please submit this PR as a draft initially.
Do not mark it as "Ready for review" until the template has been
completely filled out, and PR status checks have passed at least once.
-->

## **Description**

Use `break-word` for Snaps UI text wrapping to prevent squishing of text
in `Section` among other components.

[![Open in GitHub
Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/MetaMask/metamask-extension/pull/29387?quickstart=1)

## **Related issues**

Fixes: https://github.com/MetaMask/snaps/issues/2816

## **Screenshots/Recordings**


![image](https://github.com/user-attachments/assets/9466464c-862d-4cc2-84a5-97896cd521f4)
---
 ui/components/app/snaps/snap-ui-renderer/components/text.ts   | 2 +-
 .../snaps-section/__snapshots__/snaps-section.test.tsx.snap   | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/ui/components/app/snaps/snap-ui-renderer/components/text.ts b/ui/components/app/snaps/snap-ui-renderer/components/text.ts
index 96bb6c520e48..6b68227f6bd5 100644
--- a/ui/components/app/snaps/snap-ui-renderer/components/text.ts
+++ b/ui/components/app/snaps/snap-ui-renderer/components/text.ts
@@ -55,7 +55,7 @@ export const text: UIComponentFactory<TextElement> = ({
       variant:
         element.props.size === 'sm' ? TextVariant.bodySm : TextVariant.bodyMd,
       fontWeight: getFontWeight(element.props.fontWeight),
-      overflowWrap: OverflowWrap.Anywhere,
+      overflowWrap: OverflowWrap.BreakWord,
       color: getTextColor(element.props.color),
       className: 'snap-ui-renderer__text',
       textAlign: element.props.alignment,
diff --git a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
index 656b1fc49740..27b21ab7ab3c 100644
--- a/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
+++ b/ui/pages/confirmations/components/confirm/snaps/snaps-section/__snapshots__/snaps-section.test.tsx.snap
@@ -46,7 +46,7 @@ exports[`SnapsSection renders section for typed sign request 1`] = `
             style="overflow-y: auto;"
           >
             <p
-              class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-anywhere mm-box--color-inherit"
+              class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"
             >
               Hello world again!
             </p>
@@ -104,7 +104,7 @@ exports[`SnapsSection renders section personal sign request 1`] = `
             style="overflow-y: auto;"
           >
             <p
-              class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-anywhere mm-box--color-inherit"
+              class="mm-box mm-text snap-ui-renderer__text mm-text--body-md mm-text--font-weight-normal mm-text--overflow-wrap-break-word mm-box--color-inherit"
             >
               Hello world!
             </p>