fix: enable scrolling for i18n split view

Author: KaneFreeman

packages/core/src/components/entry-editor/EditorInterface.css

@@ -32,7 +32,9 @@
     hidden;
 
   &.CMS_Editor_i18n-active {
-    @apply flex;
+    @apply flex
+      overflow-y-auto
+      h-main;
   }
 }
 

packages/core/src/components/entry-editor/EditorInterface.tsx

@@ -355,28 +355,30 @@ const EditorInterface: FC<EditorInterfaceProps> = ({
       locales
         ?.filter(locale => isSmallScreen || locale !== default_locale)
         .map(locale => (
-          <div
-            key={locale}
-            className={classNames(
-              classes.i18n,
-              selectedLocale === locale && classes['i18n-active'],
-            )}
-          >
-            <EditorControlPane
-              collection={collection}
-              entry={entry}
-              fields={fields}
-              fieldsErrors={fieldsErrors}
-              locale={locale}
-              onLocaleChange={handleLocaleChange}
-              allowDefaultLocale={isSmallScreen}
-              submitted={submitted}
-              canChangeLocale
-              context={!isSmallScreen ? 'i18nSplit' : undefined}
-              hideBorder
-              disabled={editorDisabled}
-            />
-          </div>
+          <ScrollSyncPane key={locale}>
+            <div
+              className={classNames(
+                classes.i18n,
+                selectedLocale === locale && classes['i18n-active'],
+                'CMS_Scrollbar_root',
+              )}
+            >
+              <EditorControlPane
+                collection={collection}
+                entry={entry}
+                fields={fields}
+                fieldsErrors={fieldsErrors}
+                locale={locale}
+                onLocaleChange={handleLocaleChange}
+                allowDefaultLocale={isSmallScreen}
+                submitted={submitted}
+                canChangeLocale
+                context={!isSmallScreen ? 'i18nSplit' : undefined}
+                hideBorder
+                disabled={editorDisabled}
+              />
+            </div>
+          </ScrollSyncPane>
         )),
     [
       locales,

packages/core/src/components/entry-editor/EditorToolbar.tsx

@@ -360,10 +360,10 @@ const EditorToolbar: FC<EditorToolbarProps> = ({
                   </MenuItemButton>
                   <MenuItemButton
                     onClick={toggleScrollSync}
-                    disabled={isLoading || i18nActive || !previewActive}
+                    disabled={isLoading || (!i18nActive && !previewActive)}
                     startIcon={HeightIcon}
                     endIcon={
-                      scrollSyncActive && !(i18nActive || !previewActive) ? CheckIcon : undefined
+                      scrollSyncActive && (i18nActive || previewActive) ? CheckIcon : undefined
                     }
                   >
                     {t('editor.editorInterface.toggleScrollSync')}