[field] Fix word-break

sanity-io · Oct 6, 2020 · 09e0963 · 09e0963
1 parent 4afe0dd
commit 09e0963
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 2 deletions.
diff --git a/packages/@sanity/field/src/diff/annotations/AnnotatedStringDiff.css b/packages/@sanity/field/src/diff/annotations/AnnotatedStringDiff.css
@@ -3,7 +3,6 @@
 .segment {
   line-height: calc(1.25em + 2px);
   position: relative;
-  word-break: break-all;
   border-radius: var(--border-radius-small);
 
   @nest &:hover {

diff --git a/packages/@sanity/field/src/diff/components/Change.css b/packages/@sanity/field/src/diff/components/Change.css
@@ -1,9 +1,11 @@
 .from {
   display: block;
   text-decoration: none;
+  word-break: break-all;
 }
 
 .to {
   display: block;
   text-decoration: none;
+  word-break: break-all;
 }
diff --git a/packages/@sanity/field/src/types/string/diff/StringFieldDiff.css b/packages/@sanity/field/src/types/string/diff/StringFieldDiff.css
@@ -0,0 +1,3 @@
+.root {
+  word-break: break-all;
+}
diff --git a/packages/@sanity/field/src/types/string/diff/StringFieldDiff.tsx b/packages/@sanity/field/src/types/string/diff/StringFieldDiff.tsx
@@ -2,6 +2,8 @@ import React from 'react'
 import {DiffComponent, StringDiff, AnnotatedStringDiff, Change} from '../../../diff'
 import {StringPreview} from '../preview/StringPreview'
 
+import styles from './StringFieldDiff.css'
+
 export const StringFieldDiff: DiffComponent<StringDiff> = ({diff, schemaType}) => {
   const {options} = schemaType
 
@@ -11,5 +13,9 @@ export const StringFieldDiff: DiffComponent<StringDiff> = ({diff, schemaType}) =
     return <Change diff={diff} previewComponent={StringPreview} schemaType={schemaType} />
   }
 
-  return <AnnotatedStringDiff diff={diff} />
+  return (
+    <div className={styles.root}>
+      <AnnotatedStringDiff diff={diff} />
+    </div>
+  )
 }
diff --git a/packages/@sanity/field/src/types/string/preview/StringPreview.css b/packages/@sanity/field/src/types/string/preview/StringPreview.css
@@ -4,6 +4,7 @@
   display: inline-block;
   padding: var(--extra-small-padding) var(--small-padding);
   border-radius: var(--border-radius-small);
+  word-break: break-all;
 
   @nest del & {
     text-decoration: line-through;