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) => ( {