diff --git a/projects/js-packages/ai-client/changelog/pr-47616 b/projects/js-packages/ai-client/changelog/pr-47616 new file mode 100644 index 000000000000..562b59fddd42 --- /dev/null +++ b/projects/js-packages/ai-client/changelog/pr-47616 @@ -0,0 +1,4 @@ +Significance: patch +Type: fixed + +AI Assistant: Fix modal shaking when content streams in by correcting header margins and making the header sticky. diff --git a/projects/js-packages/ai-client/src/components/modal/index.tsx b/projects/js-packages/ai-client/src/components/modal/index.tsx index dfc014790f8e..e56e1a340ce3 100644 --- a/projects/js-packages/ai-client/src/components/modal/index.tsx +++ b/projects/js-packages/ai-client/src/components/modal/index.tsx @@ -57,7 +57,6 @@ export default function AiAssistantModal( { >
-
{ children }
diff --git a/projects/js-packages/ai-client/src/components/modal/style.scss b/projects/js-packages/ai-client/src/components/modal/style.scss index 139e002b3dd9..9da174285abd 100644 --- a/projects/js-packages/ai-client/src/components/modal/style.scss +++ b/projects/js-packages/ai-client/src/components/modal/style.scss @@ -16,16 +16,14 @@ &__header { display: flex; justify-content: space-between; - margin-right: -32px; - margin-left: -32px; - margin-top: -32px; + margin-right: -24px; + margin-left: -24px; + margin-top: -24px; padding: 8px 12px; - } - - &__divider { - background: #dcdcde; - margin: 0 -32px; - height: 1px; + position: sticky; + top: -24px; + background: #fff; + border-bottom: 1px solid #dcdcde; } &__title-wrapper { diff --git a/projects/plugins/jetpack/changelog/pr-47616 b/projects/plugins/jetpack/changelog/pr-47616 new file mode 100644 index 000000000000..2c536f600a1f --- /dev/null +++ b/projects/plugins/jetpack/changelog/pr-47616 @@ -0,0 +1,4 @@ +Significance: patch +Type: bugfix + +AI Assistant: Fix modal shaking when content streams in by correcting header margins and making the header sticky. diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/feedback/style.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/feedback/style.scss index f8e6acc8670e..b1920de51a17 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/feedback/style.scss +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/feedback/style.scss @@ -1,8 +1,8 @@ .ai-assistant-post-feedback { &__suggestion { - padding: 18px 0; - margin-bottom: -32px; + padding: 8px 0; + margin-bottom: -16px; ul, ol { diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/style.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/style.scss index 72ba6961cd26..91eb812231f4 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/style.scss +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/style.scss @@ -26,11 +26,11 @@ &__footer { display: flex; justify-content: flex-start; - margin-right: -32px; - margin-left: -32px; - margin-top: 32px; - margin-bottom: -32px; - padding: 20px 32px; + margin-right: -24px; + margin-left: -24px; + margin-top: 24px; + margin-bottom: -24px; + padding: 20px 24px; border-top: solid 1px #dcdcde; height: 60px; }