diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-breve-anchorless-popover b/projects/plugins/jetpack/changelog/update-jetpack-ai-breve-anchorless-popover new file mode 100644 index 0000000000000..b04e8b78a7564 --- /dev/null +++ b/projects/plugins/jetpack/changelog/update-jetpack-ai-breve-anchorless-popover @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +AI Assistant: Limit popover height and fix anchorless popover diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx index 4152522bb8b17..aaa421188a3c7 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx @@ -116,7 +116,7 @@ export default function Highlight() { }, [] ); const isPopoverOpen = popoverOpen && virtual; - const hasSuggestions = Boolean( suggestions?.suggestion ); + const hasSuggestions = Boolean( suggestions?.suggestion ) || spellingSuggestions.length > 0; const handleMouseEnter = () => { setPopoverHover( true ); @@ -263,7 +263,7 @@ export default function Highlight() { return ( <> - { isPopoverOpen && ( + { isPopoverOpen && anchor?.parentElement && ( ) } -
+
{ feature !== SPELLING_MISTAKES.name && hasSuggestions && ( ) ) } +
+
+ { feature === SPELLING_MISTAKES.name && ( + + ) } -
- { feature === SPELLING_MISTAKES.name && ( - - ) } - - { feature !== SPELLING_MISTAKES.name && - ( hasSuggestions - ? __( 'Click on the suggestion to insert it.', 'jetpack' ) - : description ) } + { feature !== SPELLING_MISTAKES.name && + ( hasSuggestions + ? __( 'Click on the suggestion to insert it.', 'jetpack' ) + : description ) } -
- -
+
+
diff --git a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss index 5c6097308e4ca..dec5b67a664c5 100644 --- a/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss +++ b/projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss @@ -32,8 +32,13 @@ &.jetpack-ai-breve__has-suggestions { align-items: flex-start; - padding-top: 8px; - gap: 8px; + + .jetpack-ai-breve__suggestions-container { + max-height: calc( 200px - 32px ); // 32px is the height of the helper buttons wrapper + overflow-y: auto; + overflow-x: hidden; + padding: 3px 0; // Space for the focus highlight + } } .jetpack-ai-breve__header-container { @@ -41,6 +46,7 @@ width: 100%; justify-content: space-between; gap: 32px; + height: 40px; .jetpack-ai-breve__title, .jetpack-ai-breve__action { @@ -75,17 +81,27 @@ padding-top: 0px; padding-bottom: 0px; padding-right: 0px; - height: unset; + height: 24px; & > svg, path { fill: #0277a8; } } + + .jetpack-ai-breve__loading { + height: 24px; + display: flex; + align-items: center; + + svg { + margin-top: 0; + } + } } } - .jetpack-ai-breve__bottom-container { + .jetpack-ai-breve__suggestions-container { display: flex; flex-direction: column; border-top: 1px solid #dcdcde; @@ -101,30 +117,6 @@ } } - .jetpack-ai-breve__helper { - padding: 4px 8px; - background-color: #f6f7f7; - white-space: nowrap; - color: #646970; - margin: 4px; - border-radius: 4px; - font-size: 12px; - display: flex; - justify-content: space-between; - align-items: center; - gap: 8px; - - .jetpack-ai-breve__helper-buttons-wrapper { - display: flex; - gap: 16px; - } - - .components-button { - padding: 0px; - color: #646970; - } - } - .components-button.is-tertiary { color: #000000; white-space: break-spaces; @@ -137,5 +129,30 @@ line-height: 20px; } } + + .jetpack-ai-breve__helper { + padding: 4px 8px; + background-color: #f6f7f7; + white-space: nowrap; + color: #646970; + margin: 4px; + border-radius: 4px; + font-size: 12px; + display: flex; + justify-content: space-between; + align-items: center; + gap: 8px; + width: calc( 100% - 8px ); + + .jetpack-ai-breve__helper-buttons-wrapper { + display: flex; + gap: 16px; + } + + .components-button { + padding: 0px; + color: #646970; + } + } } }