From 1d708eca9dc281bafbc2f52b45c49c52f3dd3b79 Mon Sep 17 00:00:00 2001
From: Nikita <nkdevinfo@gmail.com>
Date: Thu, 26 Dec 2024 23:16:32 +0300
Subject: [PATCH] fixed preview properly displaying full and wide sections

remove preview opacity dimm when loading state
---
 .../popup/components/ai-response/index.js     | 51 +++++++++----------
 .../popup/components/ai-response/style.scss   |  5 ++
 .../popup/components/content/style.scss       |  3 +-
 3 files changed, 31 insertions(+), 28 deletions(-)

diff --git a/src/editor/popup/components/ai-response/index.js b/src/editor/popup/components/ai-response/index.js
index 0400bd3..f57429c 100644
--- a/src/editor/popup/components/ai-response/index.js
+++ b/src/editor/popup/components/ai-response/index.js
@@ -18,40 +18,37 @@ const AIResponse = memo(
 		}
 
 		return (
-			<div
-				className="mind-popup-response"
-				style={{
-					opacity: loading ? 0.85 : 1,
-				}}
-			>
+			<div className="mind-popup-response">
 				{response.length > 0 && (
 					<div className="mind-popup-response__preview">
 						<BlockPreview
-							blocks={response}
+							// Since the preview does not render properly first block align full, we need to create the wrapper Group block with our custom styles.
+							// Align classes rendered properly only for the inner blocks.
+							blocks={[
+								{
+									name: 'core/group',
+									clientId:
+										'a9b75f7e-55c7-4f2b-93bb-00cf24181278',
+									isValid: true,
+									attributes: {
+										// "tagName": "div",
+										align: 'full',
+										layout: {
+											type: 'constrained',
+										},
+										className: 'alignfull',
+									},
+									innerBlocks: 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;
-									}
-								`,
+										.is-root-container > div {
+											margin-top: 0;
+										}
+									`,
 								},
 							]}
 						/>
diff --git a/src/editor/popup/components/ai-response/style.scss b/src/editor/popup/components/ai-response/style.scss
index c7a73df..a1e270c 100644
--- a/src/editor/popup/components/ai-response/style.scss
+++ b/src/editor/popup/components/ai-response/style.scss
@@ -5,6 +5,11 @@
 
 	/* Optimize repaints */
 	contain: content;
+
+	.block-editor-block-preview__content,
+	.block-editor-block-preview__content iframe {
+		max-height: none !important;
+	}
 }
 
 @keyframes mind-cursor-blink {
diff --git a/src/editor/popup/components/content/style.scss b/src/editor/popup/components/content/style.scss
index 46513cd..c83e381 100644
--- a/src/editor/popup/components/content/style.scss
+++ b/src/editor/popup/components/content/style.scss
@@ -9,7 +9,8 @@ $padding: 10px;
 	padding: $padding $padding * 2;
 
 	&:empty,
-	&:has(.mind-popup-request:empty) {
+	&:has(.mind-popup-request:empty),
+	&:has(.mind-popup-request iframe) {
 		padding: 0;
 		margin-bottom: -1px;
 	}