Fix to post overflow on web (close #395) (#407)

3 files changed, 21 insertions, 3 deletions

diff --git a/src/view/com/util/Link.tsx b/src/view/com/util/Link.tsx
index 703869be1..5215a0231 100644
--- a/src/view/com/util/Link.tsx
+++ b/src/view/com/util/Link.tsx
@@ -90,6 +90,7 @@ export const TextLink = observer(function TextLink({
   text,
   numberOfLines,
   lineHeight,
+  dataSet,
 }: {
   testID?: string
   type?: TypographyVariant
@@ -98,6 +99,7 @@ export const TextLink = observer(function TextLink({
   text: string | JSX.Element | React.ReactNode
   numberOfLines?: number
   lineHeight?: number
+  dataSet?: any
 }) {
   const {...props} = useLinkProps({to: href})
   const store = useStores()
@@ -117,6 +119,8 @@ export const TextLink = observer(function TextLink({
       style={style}
       numberOfLines={numberOfLines}
       lineHeight={lineHeight}
+      // @ts-ignore web only -prf
+      dataSet={dataSet}
       {...props}>
       {text}
     </Text>
diff --git a/src/view/com/util/text/RichText.tsx b/src/view/com/util/text/RichText.tsx
index 804db002a..0dc13fd34 100644
--- a/src/view/com/util/text/RichText.tsx
+++ b/src/view/com/util/text/RichText.tsx
@@ -8,6 +8,8 @@ import {toShortUrl} from 'lib/strings/url-helpers'
 import {useTheme, TypographyVariant} from 'lib/ThemeContext'
 import {usePalette} from 'lib/hooks/usePalette'
 
+const WORD_WRAP = {wordWrap: 1}
+
 export function RichText({
   testID,
   type = 'md',
@@ -39,7 +41,8 @@ export function RichText({
         lineHeight: 30,
       }
       return (
-        <Text testID={testID} style={[style, pal.text]}>
+        // @ts-ignore web only -prf
+        <Text testID={testID} style={[style, pal.text]} dataSet={WORD_WRAP}>
           {text}
         </Text>
       )
@@ -48,7 +51,9 @@ export function RichText({
       <Text
         testID={testID}
         type={type}
-        style={[style, pal.text, lineHeightStyle]}>
+        style={[style, pal.text, lineHeightStyle]}
+        // @ts-ignore web only -prf
+        dataSet={WORD_WRAP}>
         {text}
       </Text>
     )
@@ -72,6 +77,7 @@ export function RichText({
           text={segment.text}
           href={`/profile/${mention.did}`}
           style={[style, lineHeightStyle, pal.link]}
+          dataSet={WORD_WRAP}
         />,
       )
     } else if (link && AppBskyRichtextFacet.validateLink(link).success) {
@@ -82,6 +88,7 @@ export function RichText({
           text={toShortUrl(segment.text)}
           href={link.uri}
           style={[style, lineHeightStyle, pal.link]}
+          dataSet={WORD_WRAP}
         />,
       )
     } else {
@@ -94,7 +101,9 @@ export function RichText({
       testID={testID}
       type={type}
       style={[style, pal.text, lineHeightStyle]}
-      numberOfLines={numberOfLines}>
+      numberOfLines={numberOfLines}
+      // @ts-ignore web only -prf
+      dataSet={WORD_WRAP}>
       {els}
     </Text>
   )
diff --git a/web/index.html b/web/index.html
index 9e05b516b..35ade49c1 100644
--- a/web/index.html
+++ b/web/index.html
@@ -72,6 +72,11 @@
         text-decoration: underline;
       }
 
+      /* Styling hacks */
+      *[data-word-wrap] {
+        word-break: break-word;
+      }
+
       /* ProseMirror */
       .ProseMirror {
         font: 18px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;