[FIX] Iframe overlay

src/components/Messages/MessageText/markdown.js

@@ -81,4 +81,4 @@ md.use((md) => {
 	});
 });
 
-export const renderMarkdown = (...args) => sanitize(md.render(...args), { ADD_ATTR: ['target','rel'] });
+export const renderMarkdown = (...args) => sanitize(md.render(...args), { ADD_ATTR: ['target', 'rel'] });

src/lib/triggers.js

@@ -124,7 +124,6 @@ class Triggers {
 					}
 
 					route('/trigger-messages');
-					parentCall('openWidget');
 					store.setState({ minimized: false });
 				});
 			}

src/routes/TriggerMessage/component.js

@@ -1,8 +1,9 @@
-import { h, Component } from 'preact';
+import { h, Component, createRef } from 'preact';
 
 import Screen from '../../components/Screen';
 import { createClassName } from '../../components/helpers';
 import I18n from '../../i18n';
+import { parentCall } from '../../lib/parentCall';
 import styles from './styles.scss';
 
 
@@ -11,13 +12,29 @@ const defaultTitle = I18n.t('Messages');
 export default class TriggerMessage extends Component {
 	state = { }
 
+	constructor(props) {
+		super(props);
+		this.ref = createRef();
+	}
+
+	componentDidUpdate() {
+		let height = 0;
+
+		this.ref.current.base.children.forEach((el) => {
+			height += el.scrollHeight;
+		});
+
+		parentCall('resizeWidget', height);
+	}
+
 	render({ title, messages, loading, onStartChat = () => {}, departments, ...props }) {
 		const { theme: { color } } = props;
 		return (
 			<Screen
 				title={title || defaultTitle}
 				{...props}
 				triggered={true}
+				ref={this.ref}
 			>
 				<Screen.Content triggered={true}>
 					{messages && messages.map((message) => message.msg && <p className={createClassName(styles, 'trigger-message__message')}>{message.msg}</p>)}

src/routes/TriggerMessage/container.js

@@ -10,6 +10,7 @@ import TriggerMessage from './component';
 export class TriggerMessageContainer extends Component {
 	handleStart() {
 		parentCall('setFullScreenDocumentMobile');
+		parentCall('openWidget');
 		route('/');
 	}
 

src/widget.js

@@ -70,7 +70,7 @@ function callHook(action, params) {
 	iframe.contentWindow.postMessage(data, '*');
 }
 
-const updateWidgetStyle = (isOpened) => {
+const updateWidgetStyle = (isOpened, height) => {
 	if (smallScreen && isOpened) {
 		scrollPosition = document.documentElement.scrollTop;
 		bodyStyle = document.body.style.cssText;
@@ -92,10 +92,15 @@ const updateWidgetStyle = (isOpened) => {
 		 * so fixed it to 100% avoiding problem for some browsers. Similar resolution
 		 * for widget.style.width
 		 */
+		if (height) {
+			widget.style.height = smallScreen ? '100%'
+				: `${ WIDGET_MARGIN + height + WIDGET_MARGIN + WIDGET_MINIMIZED_HEIGHT }px`;
+		} else {
+			widget.style.height = smallScreen ? '100%'
+				: `${ WIDGET_MARGIN + WIDGET_OPEN_HEIGHT + WIDGET_MARGIN + WIDGET_MINIMIZED_HEIGHT + WIDGET_MARGIN }px`;
+		}
 
 		widget.style.width = smallScreen ? '100%' : `${ WIDGET_MARGIN + WIDGET_OPEN_WIDTH + WIDGET_MARGIN }px`;
-		widget.style.height = smallScreen ? '100%'
-			: `${ WIDGET_MARGIN + WIDGET_OPEN_HEIGHT + WIDGET_MARGIN + WIDGET_MINIMIZED_HEIGHT + WIDGET_MARGIN }px`;
 	} else {
 		widget.style.left = 'auto';
 		widget.style.width = `${ WIDGET_MARGIN + WIDGET_MINIMIZED_WIDTH + WIDGET_MARGIN }px`;
@@ -159,6 +164,11 @@ const openWidget = () => {
 	emitCallback('chat-maximized');
 };
 
+const resizeWidget = (height) => {
+	updateWidgetStyle(true, height);
+	widget.dataset.state = 'triggered';
+};
+
 function closeWidget() {
 	if (widget.dataset.state === 'closed') {
 		return;
@@ -205,6 +215,10 @@ const api = {
 		openWidget();
 	},
 
+	resizeWidget(height) {
+		resizeWidget(height);
+	},
+
 	removeWidget() {
 		document.body.removeChild(widget);
 	},