Title Optimization: small UI/UX fixes (#39399)

* Justify itens to the left so the UI works when itens are shorter

* Trigger a new generation when enter/return is pressed

* Changelog

projects/plugins/jetpack/changelog/update-jetpack-ai-fix-alignment-on-title-optimization

@@ -0,0 +1,4 @@
+Significance: patch
+Type: other
+
+Title Optimization: handle enter/return key to trigger a generation when they are pressed.

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/title-optimization-keywords.scss

@@ -6,6 +6,11 @@
 		display: flex;
 		justify-content: center;
 
+		// The element created by the KeyboardShortcuts component
+		div {
+			width: 100%;
+		}
+
 		textarea {
 			width: 100%;
 			outline: none;

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/title-optimization-keywords.tsx

@@ -1,7 +1,7 @@
 /**
  * Internal dependencies
  */
-import { Button } from '@wordpress/components';
+import { Button, KeyboardShortcuts } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import './title-optimization-keywords.scss';
 
@@ -25,17 +25,28 @@ export default function TitleOptimizationKeywords( {
 	return (
 		<div className="jetpack-ai-title-optimization__keywords">
 			<div className="jetpack-ai-title-optimization__keywords__textarea">
-				<textarea
-					value={ currentKeywords }
-					disabled={ disabled }
-					maxLength={ 100 }
-					rows={ 1 }
-					onChange={ handleKeywordChange }
-					placeholder={ __(
-						"Add optional keywords you'd like to include and generate new suggestions.",
-						'jetpack'
-					) }
-				></textarea>
+				<KeyboardShortcuts
+					bindGlobal
+					shortcuts={ {
+						enter: () => {
+							if ( ! disabled ) {
+								onGenerate();
+							}
+						},
+					} }
+				>
+					<textarea
+						value={ currentKeywords }
+						disabled={ disabled }
+						maxLength={ 100 }
+						rows={ 1 }
+						onChange={ handleKeywordChange }
+						placeholder={ __(
+							"Add optional keywords you'd like to include and generate new suggestions.",
+							'jetpack'
+						) }
+					></textarea>
+				</KeyboardShortcuts>
 			</div>
 			<div className="jetpack-ai-title-optimization__keywords__button">
 				<Button onClick={ onGenerate } variant="secondary" disabled={ disabled }>

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/title-optimization/title-optimization-options.scss

@@ -4,7 +4,7 @@
 
 .jetpack-ai-title-optimization__option {
 	display: flex;
-	justify-content: center;
+	justify-content: left;
 	align-items: start;
 	gap: 16px;
 	margin-bottom: 16px;