From 207b97c6ccd7de2bd17f3c4151d7743304e9bab2 Mon Sep 17 00:00:00 2001
From: Nikita <nkdevinfo@gmail.com>
Date: Thu, 12 Dec 2024 09:38:45 +0300
Subject: [PATCH] fixed some layout  styles in preview

change modal to fullscreen when generating blocks
---
 .../popup/components/ai-response/index.js     | 30 ++++++++++++++++++-
 .../popup/components/content/style.scss       |  2 ++
 src/editor/popup/components/input/index.js    |  3 +-
 src/editor/popup/index.js                     |  2 +-
 src/editor/popup/style.scss                   |  6 +++-
 5 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/editor/popup/components/ai-response/index.js b/src/editor/popup/components/ai-response/index.js
index fbb4fd9..0400bd3 100644
--- a/src/editor/popup/components/ai-response/index.js
+++ b/src/editor/popup/components/ai-response/index.js
@@ -26,7 +26,35 @@ const AIResponse = memo(
 			>
 				{response.length > 0 && (
 					<div className="mind-popup-response__preview">
-						<BlockPreview blocks={response} viewportWidth={800} />
+						<BlockPreview
+							blocks={response}
+							viewportWidth={0}
+							// TODO: the following container style is hardcoded and should be changed.
+							additionalStyles={[
+								{
+									css: `
+									.is-root-container > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
+										max-width: var(--wp--style--global--content-size);
+										margin-left: auto !important;
+										margin-right: auto !important;
+									}
+									.is-root-container > .alignwide {
+										max-width: var(--wp--style--global--wide-size);
+										margin-left: auto;
+										margin-right: auto;
+									}
+									.is-root-container > .alignfull {
+										max-width: none;
+									}
+									:root :where(.is-layout-flow) > *,
+									.is-root-container > * {
+										margin-block-start: 1.2rem;
+										margin-block-end: 0;
+									}
+								`,
+								},
+							]}
+						/>
 					</div>
 				)}
 			</div>
diff --git a/src/editor/popup/components/content/style.scss b/src/editor/popup/components/content/style.scss
index a95f896..46513cd 100644
--- a/src/editor/popup/components/content/style.scss
+++ b/src/editor/popup/components/content/style.scss
@@ -15,6 +15,8 @@ $padding: 10px;
 	}
 
 	.mind-popup-request {
+		margin-bottom: auto;
+
 		ol,
 		ul {
 			list-style: auto;
diff --git a/src/editor/popup/components/input/index.js b/src/editor/popup/components/input/index.js
index 761b41a..d2e38e4 100644
--- a/src/editor/popup/components/input/index.js
+++ b/src/editor/popup/components/input/index.js
@@ -41,6 +41,7 @@ export default function Input(props) {
 		}
 	);
 
+	const hasResponse = response?.length > 0;
 	let contextLabel = context;
 
 	switch (context) {
@@ -97,7 +98,7 @@ export default function Input(props) {
 			// Trying to set this with state or a ref will product an incorrect value.
 			ref.current.style.height = scrollHeight + 'px';
 		}
-	}, [ref, input]);
+	}, [ref, input, loading, hasResponse]);
 
 	return (
 		<div className="mind-popup-input">
diff --git a/src/editor/popup/index.js b/src/editor/popup/index.js
index 04bcc69..b551fe8 100644
--- a/src/editor/popup/index.js
+++ b/src/editor/popup/index.js
@@ -9,7 +9,6 @@ import './style.scss';
 import { createRoot } from '@wordpress/element';
 import { Modal } from '@wordpress/components';
 import { useSelect, useDispatch } from '@wordpress/data';
-import { rawHandler } from '@wordpress/blocks';
 import domReady from '@wordpress/dom-ready';
 import clsx from 'clsx';
 
@@ -100,6 +99,7 @@ export default function Popup() {
 				reset();
 				close();
 			}}
+			isFullScreen={loading || response?.length}
 			__experimentalHideHeader
 		>
 			{connected ? (
diff --git a/src/editor/popup/style.scss b/src/editor/popup/style.scss
index bf60f94..e185116 100644
--- a/src/editor/popup/style.scss
+++ b/src/editor/popup/style.scss
@@ -5,11 +5,15 @@ $padding: 10px;
 	position: relative;
 	top: 15%;
 	margin-top: 0;
-	width: 650px;
+	width: 550px;
 	max-height: clamp(0px, 440px, 75vh);
 	border-radius: 10px;
 	color: #000;
 
+	&.is-full-screen {
+		top: 40px;
+	}
+
 	.components-modal__content {
 		padding: 0;
 		overflow: hidden;