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

Author: vicmeow

packages/@sanity/field/src/types/datetime/diff/DatetimeFieldDiff.css

@@ -2,13 +2,10 @@ import React from 'react'
 import {DiffComponent, DiffFromTo, StringDiff} from '../../../diff'
 import {DatetimePreview} from '../preview'
 
-import styles from './DatetimeFieldDiff.css'
-
 export const DatetimeFieldDiff: DiffComponent<StringDiff> = ({diff, schemaType}) => {
   return (
     <DiffFromTo
       align="center"
-      cardClassName={styles.card}
       diff={diff}
       schemaType={schemaType}
       previewComponent={DatetimePreview}

packages/@sanity/field/src/types/datetime/diff/DatetimeFieldDiff.tsx

@@ -1,16 +1,27 @@
 import React from 'react'
 import * as legacyDateFormat from '@sanity/util/legacyDateFormat'
+import styled from 'styled-components'
+import {Box} from '@sanity/ui'
 import {StringSchemaType} from '../../../diff'
 import {PreviewComponent} from '../../../preview/types'
 
 const DEFAULT_DATE_FORMAT = 'YYYY-MM-DD'
 const DEFAULT_TIME_FORMAT = 'HH:mm'
 
+const DatetimeWrapper = styled.div`
+  display: inline-block;
+  word-wrap: break-word;
+`
+
 export const DatetimePreview: PreviewComponent<string> = function DatetimePreview({
   value,
   schemaType,
 }) {
-  return <>{formatDateTime(value, schemaType)}</>
+  return (
+    <Box as={DatetimeWrapper} paddingX={2} paddingY={1}>
+      {formatDateTime(value, schemaType)}
+    </Box>
+  )
 }
 
 function formatDateTime(value: string, schemaType: StringSchemaType): string {