import React from 'react'
import {DiffComponent, ReferenceDiff} from '../../../diff'
import {Change} from '../../../diff/components'
import {ReferencePreview} from '../preview/ReferencePreview'

export const ReferenceFieldDiff: DiffComponent<ReferenceDiff> = ({diff, schemaType}) => {
  return (
    <Change
      diff={diff}
      layout="grid"
      path="_ref"
      previewComponent={ReferencePreview}
      schemaType={schemaType}
    />
  )
}

import React from 'react'
import {DiffComponent, ReferenceDiff} from '../../../diff'
import {Change} from '../../../diff/components'
import {ReferencePreview} from '../preview/ReferencePreview'

export const ReferenceFieldDiff: DiffComponent<ReferenceDiff> = ({diff, schemaType}) => {
  return (
    <Change
      previewComponent={ReferencePreview}
      layout={diff.fromValue && diff.toValue ? 'grid' : 'inline'}
      path="_ref"
      diff={diff}
      schemaType={schemaType}
    />
  )
}

--- 
+++ 
@@ -6,10 +6,10 @@
 export const ReferenceFieldDiff: DiffComponent<ReferenceDiff> = ({diff, schemaType}) => {
   return (
     <Change
+      diff={diff}
+      layout="grid"
+      path="_ref"
       previewComponent={ReferencePreview}
-      layout={diff.fromValue && diff.toValue ? 'grid' : 'inline'}
-      path="_ref"
-      diff={diff}
       schemaType={schemaType}
     />
   )
[field] Use grid layout for reference changes
