[INTEG-3278] fix: rich text diff editor now sticks when scrolling (#10231)

* fix: rich text diff editor now sticks when scrolling

* cleanup: css even more for scroll

* fix: cleanup css for rich text diff

Author: ryunsong-contentful

apps/rich-text-versioning/src/locations/Field.styles.ts

@@ -0,0 +1,35 @@
+import { css } from 'emotion';
+
+/**
+ * Rich Text Editor - Sticky Toolbar
+ * Makes the formatting toolbar remain visible when scrolling through content
+ */
+
+// CSS custom properties for configuration
+const rteEditorMaxHeight = '500px';
+const rteToolbarZIndex = 100;
+
+export const styles = {
+  richTextEditorContainer: css({
+    position: 'relative',
+    overflow: 'visible',
+
+    // Sticky toolbar positioning
+    '& > div > div:first-child > div': {
+      position: 'sticky',
+      top: 0,
+      zIndex: rteToolbarZIndex,
+    },
+
+    // Scrollable editor content area
+    '& [data-slate-editor="true"]': {
+      maxHeight: rteEditorMaxHeight,
+      overflowY: 'auto',
+      overflowX: 'hidden',
+      // Smooth scrolling for better UX
+      scrollBehavior: 'smooth',
+      // Prevent scroll chaining to parent
+      overscrollBehavior: 'contain',
+    },
+  }),
+};

apps/rich-text-versioning/src/locations/Field.tsx

@@ -8,6 +8,7 @@ import { Document } from '@contentful/rich-text-types';
 import { EntrySys } from '@contentful/app-sdk/dist/types/utils';
 import { convertToSerializableJson, ErrorInfo } from '../utils';
 import { ReleaseEntrySys } from '@contentful/app-sdk/dist/types/entry.types';
+import { styles } from './Field.styles';
 
 const Field = () => {
   const sdk = useSDK<FieldAppSDK>();
@@ -93,7 +94,9 @@ const Field = () => {
 
   return (
     <>
-      <RichTextEditor sdk={sdk} isInitiallyDisabled={false} />
+      <div className={styles.richTextEditorContainer}>
+        <RichTextEditor sdk={sdk} isInitiallyDisabled={false} />
+      </div>
       <Tooltip
         placement="top"
         content={