fixed some layout styles in preview

change modal to fullscreen when generating blocks
This commit is contained in:
Nikita 2024-12-12 09:38:45 +03:00
parent b9e35e28ae
commit 207b97c6cc
5 changed files with 39 additions and 4 deletions

View file

@ -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>

View file

@ -15,6 +15,8 @@ $padding: 10px;
}
.mind-popup-request {
margin-bottom: auto;
ol,
ul {
list-style: auto;

View file

@ -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">

View file

@ -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 ? (

View file

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