refactor(field): migrate reference diff to @sanity/ui

Author: vicmeow

packages/@sanity/field/src/types/reference/diff/ReferenceFieldDiff.css

@@ -2,13 +2,10 @@ import React from 'react'
 import {DiffComponent, DiffFromTo, ReferenceDiff} from '../../../diff'
 import {ReferencePreview} from '../preview/ReferencePreview'
 
-import styles from './ReferenceFieldDiff.css'
-
 export const ReferenceFieldDiff: DiffComponent<ReferenceDiff> = ({diff, schemaType}) => {
   return (
     <DiffFromTo
       align="center"
-      cardClassName={styles.card}
       diff={diff}
       layout="grid"
       path="_ref"

packages/@sanity/field/src/types/reference/diff/ReferenceFieldDiff.tsx

@@ -1,8 +1,16 @@
 import {Reference} from '@sanity/types'
 import React from 'react'
 import Preview from 'part:@sanity/base/preview'
+import styled from 'styled-components'
+import {Box} from '@sanity/ui'
 import {PreviewComponent} from '../../../preview/types'
 
+const ReferenceWrapper = styled.div`
+  word-wrap: break-word;
+`
+
 export const ReferencePreview: PreviewComponent<Reference> = ({value, schemaType}) => (
-  <Preview type={schemaType} value={value} layout="default" />
+  <Box as={ReferenceWrapper} padding={2}>
+    <Preview type={schemaType} value={value} layout="default" />
+  </Box>
 )