[FLASK] Fix overflow issues with text coming from snap UI (#18169)

MetaMask · Mar 16, 2023 · dce4c6d · dce4c6d
1 parent 872a8c7
commit dce4c6d
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 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
@@ -1,14 +1,18 @@
 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) => (
   <Typography
     {...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
@@ -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) => ({