From dce4c6d7c5ed6a99d99f20aca00e3db16840e458 Mon Sep 17 00:00:00 2001
From: Frederik Bolding <frederik.bolding@gmail.com>
Date: Thu, 16 Mar 2023 11:45:44 +0100
Subject: [PATCH] [FLASK] Fix overflow issues with text coming from snap UI
 (#18169)

---
 .../app/flask/snap-ui-markdown/snap-ui-markdown.js          | 6 +++++-
 .../app/flask/snap-ui-renderer/snap-ui-renderer.js          | 2 ++
 2 files changed, 7 insertions(+), 1 deletion(-)

diff --git a/ui/components/app/flask/snap-ui-markdown/snap-ui-markdown.js b/ui/components/app/flask/snap-ui-markdown/snap-ui-markdown.js
index 080dbf900..359521152 100644
--- a/ui/components/app/flask/snap-ui-markdown/snap-ui-markdown.js
+++ b/ui/components/app/flask/snap-ui-markdown/snap-ui-markdown.js
@@ -1,7 +1,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ReactMarkdown from 'react-markdown';
-import { TypographyVariant } from '../../../../helpers/constants/design-system';
+import {
+  TypographyVariant,
+  OVERFLOW_WRAP,
+} from '../../../../helpers/constants/design-system';
 import Typography from '../../../ui/typography/typography';
 
 const Paragraph = (props) => (
@@ -9,6 +12,7 @@ const Paragraph = (props) => (
     {...props}
     variant={TypographyVariant.H6}
     className="snap-ui-markdown__text"
+    overflowWrap={OVERFLOW_WRAP.BREAK_WORD}
   />
 );
 
diff --git a/ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js b/ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js
index 11f1319d3..731bd599f 100644
--- a/ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js
+++ b/ui/components/app/flask/snap-ui-renderer/snap-ui-renderer.js
@@ -9,6 +9,7 @@ import {
   FONT_WEIGHT,
   DISPLAY,
   FLEX_DIRECTION,
+  OVERFLOW_WRAP,
 } from '../../../../helpers/constants/design-system';
 import { SnapDelineator } from '../snap-delineator';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
@@ -33,6 +34,7 @@ export const UI_MAPPING = {
     props: {
       variant: TypographyVariant.H3,
       fontWeight: FONT_WEIGHT.BOLD,
+      overflowWrap: OVERFLOW_WRAP.BREAK_WORD,
     },
   }),
   text: (props) => ({