diff --git a/libs/plugins-runtime/src/lib/create-modal.spec.ts b/libs/plugins-runtime/src/lib/create-modal.spec.ts index b4bab89..3f5f4b2 100644 --- a/libs/plugins-runtime/src/lib/create-modal.spec.ts +++ b/libs/plugins-runtime/src/lib/create-modal.spec.ts @@ -95,4 +95,19 @@ describe('createModal', () => { String(expectedHeight) ); }); + + it('should apply minimum dimensions to the modal', () => { + const theme: PenpotTheme = 'light'; + const options: OpenUIOptions = { width: 100, height: 100 }; + + const modal = createModal( + 'Test Modal', + 'https://example.com', + theme, + options + ); + + expect(modal.setAttribute).toHaveBeenCalledWith('width', '200'); + expect(modal.setAttribute).toHaveBeenCalledWith('height', '200'); + }); }); diff --git a/libs/plugins-runtime/src/lib/create-modal.ts b/libs/plugins-runtime/src/lib/create-modal.ts index f19afad..4288e3d 100644 --- a/libs/plugins-runtime/src/lib/create-modal.ts +++ b/libs/plugins-runtime/src/lib/create-modal.ts @@ -11,6 +11,8 @@ export function createModal( const modal = document.createElement('plugin-modal') as PluginModalElement; modal.setTheme(theme); + const minPluginWidth = 200; + const minPluginHeight = 200; const defaultWidth = 335; const defaultHeight = 590; @@ -31,8 +33,11 @@ export function createModal( const maxWidth = window.innerWidth - initialPosition.inlineEnd; const maxHeight = window.innerHeight - initialPosition.blockStart; - const width = Math.min(options?.width || defaultWidth, maxWidth); - const height = Math.min(options?.height || defaultHeight, maxHeight); + let width = Math.min(options?.width || defaultWidth, maxWidth); + let height = Math.min(options?.height || defaultHeight, maxHeight); + + width = Math.max(width, minPluginWidth); + height = Math.max(height, minPluginHeight); modal.setAttribute('title', name); modal.setAttribute('iframe-src', url);