[field] Update diff layout

packages/@sanity/field/src/diff/components/DiffFromTo.css

@@ -1,3 +1,3 @@
 .card {
-  display: block;
+  /* display: block; */
 }

packages/@sanity/field/src/diff/components/FromTo.css

@@ -3,7 +3,9 @@
 .root {
   display: flex;
   align-items: center;
+
   @nest &[data-from-to-layout='inline'] {
+    display: inline-flex;
   }
 
   @nest &[data-from-to-layout='grid'] {
@@ -14,6 +16,8 @@
 
 .from,
 .to {
+  max-width: calc(50% - 13px);
+
   @nest .root[data-from-to-layout='grid'] & {
     flex: 1;
     min-width: 0;

packages/@sanity/field/src/types/number/diff/NumberFieldDiff.css

@@ -0,0 +1,7 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.card {
+  display: inline-block;
+  padding: calc(var(--small-padding) - 2px) var(--small-padding) calc(var(--small-padding) - 1px);
+  word-break: break-all;
+}

packages/@sanity/field/src/types/number/diff/NumberFieldDiff.tsx

@@ -2,9 +2,12 @@ import React from 'react'
 import {DiffComponent, DiffFromTo, NumberDiff} from '../../../diff'
 import {NumberPreview} from '../preview/NumberPreview'
 
+import styles from './NumberFieldDiff.css'
+
 export const NumberFieldDiff: DiffComponent<NumberDiff> = ({diff, schemaType}) => {
   return (
     <DiffFromTo
+      cardClassName={styles.card}
       diff={diff}
       schemaType={schemaType}
       previewComponent={NumberPreview}

packages/@sanity/field/src/types/number/preview/NumberPreview.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import {PreviewComponent} from '../../../preview/types'
 
-import styles from './NumberPreview.css'
-
 export const NumberPreview: PreviewComponent<string> = props => {
   const {value} = props
 
-  return <span className={styles.root}>{value}</span>
+  return <>{value}</>
 }

packages/@sanity/field/src/types/slug/diff/SlugFieldDiff.css

@@ -0,0 +1,7 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.card {
+  display: inline-block;
+  padding: calc(var(--small-padding) - 2px) var(--small-padding) calc(var(--small-padding) - 1px);
+  word-break: break-all;
+}

packages/@sanity/field/src/types/slug/diff/SlugFieldDiff.tsx

@@ -2,12 +2,20 @@ import React from 'react'
 import {DiffComponent, DiffFromTo, ObjectDiff} from '../../../diff'
 import {SlugPreview} from '../preview'
 
+import styles from './SlugFieldDiff.css'
+
 interface Slug {
   current?: string
 }
 
 export const SlugFieldDiff: DiffComponent<ObjectDiff<Slug>> = ({diff, schemaType}) => {
   return (
-    <DiffFromTo layout="grid" diff={diff} schemaType={schemaType} previewComponent={SlugPreview} />
+    <DiffFromTo
+      cardClassName={styles.card}
+      layout="inline"
+      diff={diff}
+      schemaType={schemaType}
+      previewComponent={SlugPreview}
+    />
   )
 }

packages/@sanity/field/src/types/slug/preview/SlugPreview.tsx

@@ -2,10 +2,8 @@ import React from 'react'
 import {PreviewComponent} from '../../../preview/types'
 import {Slug} from '../types'
 
-import styles from './SlugPreview.css'
-
 export const SlugPreview: PreviewComponent<Slug> = props => {
   const {value} = props
 
-  return <span className={styles.root}>{value.current}</span>
+  return <>{value.current}</>
 }

packages/@sanity/field/src/types/string/diff/StringFieldDiff.css

@@ -1,3 +1,11 @@
+@import 'part:@sanity/base/theme/variables-style';
+
 .root {
   word-break: break-all;
 }
+
+.card {
+  display: inline-block;
+  padding: calc(var(--small-padding) - 2px) var(--small-padding) calc(var(--small-padding) - 1px);
+  word-break: break-all;
+}

packages/@sanity/field/src/types/string/diff/StringFieldDiff.tsx

@@ -10,7 +10,14 @@ export const StringFieldDiff: DiffComponent<StringDiff> = ({diff, schemaType}) =
   if (options?.list) {
     // When the string is considered to be an "enum", don't show individual
     // string segment changes, rather treat is as a "from -> to" diff
-    return <DiffFromTo diff={diff} previewComponent={StringPreview} schemaType={schemaType} />
+    return (
+      <DiffFromTo
+        cardClassName={styles.card}
+        diff={diff}
+        previewComponent={StringPreview}
+        schemaType={schemaType}
+      />
+    )
   }
 
   return (

packages/@sanity/field/src/types/string/preview/StringPreview.tsx

@@ -1,10 +1,8 @@
 import React from 'react'
 import {PreviewComponent} from '../../../preview/types'
 
-import styles from './StringPreview.css'
-
 export const StringPreview: PreviewComponent<string> = props => {
   const {value} = props
 
-  return <span className={styles.root}>{value}</span>
+  return <>{value}</>
 }

packages/@sanity/field/src/types/url/diff/UrlFieldDiff.css

@@ -0,0 +1,7 @@
+@import 'part:@sanity/base/theme/variables-style';
+
+.card {
+  display: inline-block;
+  padding: calc(var(--small-padding) - 2px) var(--small-padding) calc(var(--small-padding) - 1px);
+  word-break: break-all;
+}

packages/@sanity/field/src/types/url/diff/UrlFieldDiff.tsx

@@ -2,6 +2,15 @@ import React from 'react'
 import {DiffComponent, DiffFromTo, StringDiff} from '../../../diff'
 import {StringPreview} from '../../string/preview'
 
+import styles from './UrlFieldDiff.css'
+
 export const UrlFieldDiff: DiffComponent<StringDiff> = ({diff, schemaType}) => {
-  return <DiffFromTo diff={diff} schemaType={schemaType} previewComponent={StringPreview} />
+  return (
+    <DiffFromTo
+      cardClassName={styles.card}
+      diff={diff}
+      schemaType={schemaType}
+      previewComponent={StringPreview}
+    />
+  )
 }