fixed preview properly displaying full and wide sections

remove preview opacity dimm when loading state

src/editor/popup/components/ai-response/index.js

@@ -18,40 +18,37 @@ const AIResponse = memo(
 		}
 
 		return (
-			<div
+			<div className="mind-popup-response">
-				className="mind-popup-response"
-				style={{
-					opacity: loading ? 0.85 : 1,
-				}}
-			>
 				{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)) {
+										.is-root-container > div {
-										max-width: var(--wp--style--global--content-size);
+											margin-top: 0;
-										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;
-									}
-								`,
 								},
 							]}
 						/>

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 {

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;
 	}