fix: scrolling in compare preview

Author: navinkarkera

src/library-authoring/LibraryBlock/LibraryBlock.tsx

@@ -21,6 +21,7 @@ interface LibraryBlockProps {
   minHeight?: string;
   scrollIntoView?: boolean;
   showTitle?: boolean,
+  addHeight?: number;
 }
 /**
  * React component that displays an XBlock in a sandboxed IFrame.
@@ -40,6 +41,7 @@ export const LibraryBlock = ({
   scrolling = 'no',
   scrollIntoView = false,
   showTitle = false,
+  addHeight = 0,
 }: LibraryBlockProps) => {
   const { iframeRef, setIframeRef } = useIframe();
   const xblockView = view ?? 'student_view';
@@ -96,7 +98,10 @@ export const LibraryBlock = ({
       loading="lazy"
       referrerPolicy="origin"
       style={{
-        width: '100%', height: iframeHeight, pointerEvents: 'auto', minHeight,
+        width: '100%',
+        height: iframeHeight + addHeight,
+        pointerEvents: 'auto',
+        minHeight,
       }}
       allow={IFRAME_FEATURE_POLICY}
       allowFullScreen

src/library-authoring/component-comparison/CompareChangesWidget.tsx

@@ -1,5 +1,5 @@
 import { useIntl } from '@edx/frontend-platform/i18n';
-import { Card, Stack, Tab, Tabs } from '@openedx/paragon';
+import { Card, Scrollable, Stack, Tab, Tabs } from '@openedx/paragon';
 import classNames from 'classnames';
 import { IframeProvider } from '@src/generic/hooks/context/iFrameContext';
 
@@ -49,7 +49,10 @@ const CompareChangesWidget = ({
 
   const oldBlock = oldVersion !== 0 && (
     <Card className={classNames('flex-1 min-w-0', { 'border-0': !sideBySide })}>
-      <Card.Body className="p-4 bg-white">
+      <Card.Body
+        className="p-4 bg-white overflow-auto"
+        style={{ height: '70vh' }}
+      >
         {sideBySide && (
           <h3 className="w-100 text-center mb-4">
             {oldTabMessage}
@@ -67,6 +70,7 @@ const CompareChangesWidget = ({
               version={oldVersion}
               minHeight="50vh"
               showTitle={showTitle}
+              addHeight={40}
             />
           </IframeProvider>
         </div>
@@ -76,7 +80,10 @@ const CompareChangesWidget = ({
 
   const newBlock = (
     <Card className={classNames('flex-1 min-w-0', { 'border-0': !sideBySide })}>
-      <Card.Body className="p-4 bg-white">
+      <Card.Body
+        className="p-4 bg-white overflow-auto"
+        style={{ height: '70vh' }}
+      >
         {sideBySide && (
           <h3 className="w-100 text-center mb-4">
             {newTabMessage}
@@ -88,6 +95,7 @@ const CompareChangesWidget = ({
             version={newVersion}
             showTitle={showNewTitle || showTitle}
             minHeight="50vh"
+            addHeight={40}
           />
         </IframeProvider>
       </Card.Body>