diff --git a/src/editors/AdvancedEditor.tsx b/src/editors/AdvancedEditor.tsx
index d91f38effc..09a368c041 100644
--- a/src/editors/AdvancedEditor.tsx
+++ b/src/editors/AdvancedEditor.tsx
@@ -55,6 +55,7 @@ const AdvancedEditor = ({ usageKey, onClose }: AdvancedEditorProps) => {
usageKey={usageKey}
view="studio_view"
scrolling="yes"
+ minHeight="70vh"
/>
diff --git a/src/library-authoring/LibraryBlock/LibraryBlock.tsx b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
index ef151c219f..c87091acdb 100644
--- a/src/library-authoring/LibraryBlock/LibraryBlock.tsx
+++ b/src/library-authoring/LibraryBlock/LibraryBlock.tsx
@@ -15,6 +15,7 @@ interface LibraryBlockProps {
version?: VersionSpec;
view?: string;
scrolling?: string;
+ minHeight?: string;
}
/**
* React component that displays an XBlock in a sandboxed IFrame.
@@ -30,6 +31,7 @@ export const LibraryBlock = ({
usageKey,
version,
view,
+ minHeight,
scrolling = 'no',
}: LibraryBlockProps) => {
const { iframeRef, setIframeRef } = useIframe();
@@ -61,7 +63,7 @@ export const LibraryBlock = ({
loading="lazy"
referrerPolicy="origin"
style={{
- width: '100%', height: iframeHeight, pointerEvents: 'auto', minHeight: '700px',
+ width: '100%', height: iframeHeight, pointerEvents: 'auto', minHeight,
}}
allow={IFRAME_FEATURE_POLICY}
allowFullScreen
diff --git a/src/library-authoring/component-comparison/CompareChangesWidget.tsx b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
index 6ee3fca5b5..19581e5c56 100644
--- a/src/library-authoring/component-comparison/CompareChangesWidget.tsx
+++ b/src/library-authoring/component-comparison/CompareChangesWidget.tsx
@@ -29,14 +29,22 @@ const CompareChangesWidget = ({ usageKey, oldVersion = 'published', newVersion =
-
+
-
+
diff --git a/src/library-authoring/component-info/ComponentPreview.tsx b/src/library-authoring/component-info/ComponentPreview.tsx
index 6287b1a7d9..103cddf360 100644
--- a/src/library-authoring/component-info/ComponentPreview.tsx
+++ b/src/library-authoring/component-info/ComponentPreview.tsx
@@ -31,6 +31,7 @@ const ModalComponentPreview = ({ isOpen, close, usageKey }: ModalComponentPrevie
);
@@ -71,6 +72,7 @@ const ComponentPreview = () => {
usageKey={usageKey}
key={componentMetadata.modified}
version={showOnlyPublished ? 'published' : undefined}
+ minHeight="60vh"
/>
)
: null
diff --git a/src/library-authoring/units/LibraryUnitBlocks.tsx b/src/library-authoring/units/LibraryUnitBlocks.tsx
index 6efc5cc6da..a9972f9a0f 100644
--- a/src/library-authoring/units/LibraryUnitBlocks.tsx
+++ b/src/library-authoring/units/LibraryUnitBlocks.tsx
@@ -12,6 +12,7 @@ import DraggableList, { SortableItem } from '../../editors/sharedComponents/Drag
import ErrorAlert from '../../generic/alert-error';
import { getItemIcon } from '../../generic/block-type-utils';
+import { COMPONENT_TYPES } from '../../generic/block-type-utils/constants';
import { IframeProvider } from '../../generic/hooks/context/iFrameContext';
import Loading from '../../generic/Loading';
import TagCount from '../../generic/tag-count';
@@ -24,6 +25,15 @@ import { useLibraryRoutes } from '../routes';
import messages from './messages';
import { useSidebarContext } from '../common/context/SidebarContext';
+/** Components that need large min height in preview */
+const LARGE_COMPONENTS = [
+ COMPONENT_TYPES.advanced,
+ COMPONENT_TYPES.dragAndDrop,
+ COMPONENT_TYPES.discussion,
+ 'lti',
+ 'lti_consumer',
+];
+
export const LibraryUnitBlocks = () => {
const intl = useIntl();
const [orderedBlocks, setOrderedBlocks] = useState([]);
@@ -79,6 +89,14 @@ export const LibraryUnitBlocks = () => {
navigateTo({ componentId: block.id });
};
+ /* istanbul ignore next */
+ const calculateMinHeight = (block: LibraryBlockMetadata) => {
+ if (LARGE_COMPONENTS.includes(block.blockType)) {
+ return '700px';
+ }
+ return '200px';
+ };
+
const renderedBlocks = orderedBlocks?.map((block) => (
{