AI Assistant: Limit popover height and fix anchorless popover (#39109)

* fix anchorless popover * limit suggestions height * changelog * Brief: Change overflow for suggestions container --------- Co-authored-by: Renato Augusto Gama dos Santos <[email protected]>
Automattic · Oct 25, 2024 · 36d78f8 · 36d78f8
1 parent 3887c60
commit 36d78f8
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 47 deletions.
diff --git a/projects/plugins/jetpack/changelog/update-jetpack-ai-breve-anchorless-popover 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/...ugins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/index.tsx b/...ugins/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 && (
 				<Popover
 					anchor={ virtual }
 					placement={ feature === LONG_SENTENCES.name ? 'bottom' : 'bottom-start' }
@@ -316,7 +316,7 @@ export default function Highlight() {
 								</div>
 							) }
 						</div>
-						<div className="jetpack-ai-breve__bottom-container">
+						<div className="jetpack-ai-breve__suggestions-container">
 							{ feature !== SPELLING_MISTAKES.name && hasSuggestions && (
 								<Button variant="tertiary" onClick={ handleApplySuggestion }>
 									{ suggestions?.suggestion }
@@ -334,24 +334,23 @@ export default function Highlight() {
 										{ spellingSuggestion }
 									</Button>
 								) ) }
+						</div>
+						<div className="jetpack-ai-breve__helper">
+							{ feature === SPELLING_MISTAKES.name && (
+								<Button variant="link" onClick={ handleAddToDictionary }>
+									{ __( 'Add to dictionary', 'jetpack' ) }
+								</Button>
+							) }
 
-							<div className="jetpack-ai-breve__helper">
-								{ feature === SPELLING_MISTAKES.name && (
-									<Button variant="link" onClick={ handleAddToDictionary }>
-										{ __( 'Add to dictionary', 'jetpack' ) }
-									</Button>
-								) }
-
-								{ 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 ) }
 
-								<div className="jetpack-ai-breve__helper-buttons-wrapper">
-									<Button variant="link" onClick={ handleIgnoreSuggestion }>
-										{ __( 'Ignore', 'jetpack' ) }
-									</Button>
-								</div>
+							<div className="jetpack-ai-breve__helper-buttons-wrapper">
+								<Button variant="link" onClick={ handleIgnoreSuggestion }>
+									{ __( 'Ignore', 'jetpack' ) }
+								</Button>
 							</div>
 						</div>
 					</div>

diff --git a/...gins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss b/...gins/jetpack/extensions/plugins/ai-assistant-plugin/components/breve/highlight/style.scss
@@ -32,15 +32,21 @@
 
 		&.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 {
 			display: flex;
 			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;
+			}
+		}
 	}
 }