Update onboarding popover placement (#40550)

Automattic · Dec 15, 2024 · a877b8c · a877b8c
1 parent 62838d3
commit a877b8c
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 10 deletions.
diff --git a/projects/plugins/protect/src/js/routes/scan/index.jsx b/projects/plugins/protect/src/js/routes/scan/index.jsx
@@ -83,14 +83,14 @@ const ScanPage = () => {
 								<OnboardingPopover
 									id={ hasPlan ? 'paid-scan-results' : 'free-scan-results' }
 									anchor={ scanResultsAnchor }
-									position={ 'top left' }
+									position={ 'top' }
 								/>
 							) }
 							{ !! status && ! isScanInProgress( status ) && hasPlan && (
 								<OnboardingPopover
 									id={ 'paid-understand-severity' }
 									anchor={ scanResultsAnchor }
-									position={ 'top right' }
+									position={ 'top' }
 								/>
 							) }
 						</Col>

diff --git a/projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx b/projects/plugins/protect/src/js/routes/scan/scan-admin-section-hero.tsx
@@ -107,7 +107,7 @@ const ScanAdminSectionHero: React.FC = () => {
 	return (
 		<AdminSectionHero>
 			<AdminSectionHero.Main>
-				<Text mb={ 2 } ref={ setDailyScansPopoverAnchor }>
+				<Text className={ styles[ 'last-checked' ] } mb={ 2 } ref={ setDailyScansPopoverAnchor }>
 					{ lastCheckedLocalTimestamp
 						? sprintf(
 								// translators: %s: date and time of the last scan
@@ -118,7 +118,7 @@ const ScanAdminSectionHero: React.FC = () => {
 				</Text>
 				<OnboardingPopover
 					id={ hasPlan ? 'paid-daily-and-manual-scans' : 'free-daily-scans' }
-					position={ isSm ? 'bottom' : 'middle right' }
+					position={ isSm ? 'bottom right' : 'middle right' }
 					anchor={ dailyScansPopoverAnchor }
 				/>
 				<AdminSectionHero.Heading icon={ numThreats > 0 ? 'error' : 'success' }>
@@ -157,11 +157,8 @@ const ScanAdminSectionHero: React.FC = () => {
 				) }
 				{ fixableList.length > 0 && (
 					<>
-						<div ref={ setShowAutoFixersPopoverAnchor }>
-							<Button
-								className={ styles[ 'auto-fixers' ] }
-								onClick={ handleShowAutoFixersClick( fixableList ) }
-							>
+						<div className={ styles[ 'auto-fixers' ] } ref={ setShowAutoFixersPopoverAnchor }>
+							<Button onClick={ handleShowAutoFixersClick( fixableList ) }>
 								{ sprintf(
 									/* translators: Translates to Show auto fixers $s: Number of fixable threats. */
 									__( 'Show auto fixers (%s)', 'jetpack-protect' ),
@@ -171,7 +168,7 @@ const ScanAdminSectionHero: React.FC = () => {
 						</div>
 						<OnboardingPopover
 							id="paid-fix-all-threats"
-							position={ isSm ? 'bottom right' : 'middle left' }
+							position={ isSm ? 'bottom right' : 'middle right' }
 							anchor={ showAutoFixersPopoverAnchor }
 						/>
 					</>

diff --git a/projects/plugins/protect/src/js/routes/scan/styles.module.scss b/projects/plugins/protect/src/js/routes/scan/styles.module.scss
@@ -4,6 +4,7 @@
 
 .auto-fixers {
 	margin-top: calc( var( --spacing-base ) * 4 ); // 32px
+	width: fit-content;
 }
 
 .scan-results-container {
@@ -22,3 +23,7 @@
 		display: none;
 	}
 }
+
+.last-checked {
+	width: fit-content;
+}