From 2b2f309d6f59603b8e46d1fdc0d35673efcec85d Mon Sep 17 00:00:00 2001
From: Sergey Biryukov <sergeybiryukov@git.wordpress.org>
Date: Mon, 10 May 2021 14:54:57 +0000
Subject: [PATCH] Site Health: Improve the appearance of Site Health Status
 dashboard widget.

This better utilizes the available screen space on wider screens.

Props mblach, hedgefield, Clorith.
Fixes #52966.

git-svn-id: https://develop.svn.wordpress.org/trunk@50833 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/site-health.css    | 26 ++++++++-
 src/wp-admin/includes/dashboard.php | 84 +++++++++++++++--------------
 2 files changed, 68 insertions(+), 42 deletions(-)

diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css
index 7a67525a85..497393fc48 100644
--- a/src/wp-admin/css/site-health.css
+++ b/src/wp-admin/css/site-health.css
@@ -30,10 +30,15 @@
 }
 
 .health-check-title-section {
+	clear: both;
+	text-align: center;
+	padding-top: 8px;
+}
+
+.site-health .health-check-title-section {
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	clear: both;
 }
 
 .site-health-progress-wrapper {
@@ -458,6 +463,25 @@
 	flex-shrink: 0;
 }
 
+/* Styling unique to the dashboard widget. */
+#dashboard_site_health .site-health-details {
+	padding-left: 16px;
+}
+
+#dashboard_site_health .inside {
+	display: grid;
+	grid-template-columns: 1fr 2fr;
+	grid-auto-rows: minmax(64px, auto);
+	column-gap: 16px;
+	align-items: center;
+}
+
+@media screen and (max-width: 480px) {
+	#dashboard_site_health .inside {
+		grid-template-columns: 100%;
+	}
+}
+
 @media screen and (max-width: 782px) {
 	.health-check-body {
 		margin: 0 12px;
diff --git a/src/wp-admin/includes/dashboard.php b/src/wp-admin/includes/dashboard.php
index 8eab74713e..c20bb5db6b 100644
--- a/src/wp-admin/includes/dashboard.php
+++ b/src/wp-admin/includes/dashboard.php
@@ -1907,48 +1907,50 @@ function wp_dashboard_site_health() {
 		</div>
 	</div>
 
-	<?php if ( false === $get_issues ) : ?>
-		<p>
-			<?php
-			printf(
-				/* translators: %s: URL to Site Health screen. */
-				__( 'Site health checks will automatically run periodically to gather information about your site. You can also <a href="%s">visit the Site Health screen</a> to gather information about your site now.' ),
-				esc_url( admin_url( 'site-health.php' ) )
-			);
-			?>
-		</p>
-	<?php else : ?>
-		<p>
-			<?php if ( $issues_total <= 0 ) : ?>
-				<?php _e( 'Great job! Your site currently passes all site health checks.' ); ?>
-			<?php elseif ( 1 === (int) $issue_counts['critical'] ) : ?>
-				<?php _e( 'Your site has a critical issue that should be addressed as soon as possible to improve its performance and security.' ); ?>
-			<?php elseif ( $issue_counts['critical'] > 1 ) : ?>
-				<?php _e( 'Your site has critical issues that should be addressed as soon as possible to improve its performance and security.' ); ?>
-			<?php elseif ( 1 === (int) $issue_counts['recommended'] ) : ?>
-				<?php _e( 'Your site&#8217;s health is looking good, but there is still one thing you can do to improve its performance and security.' ); ?>
-			<?php else : ?>
-				<?php _e( 'Your site&#8217;s health is looking good, but there are still some things you can do to improve its performance and security.' ); ?>
-			<?php endif; ?>
-		</p>
-	<?php endif; ?>
+	<div class="site-health-details">
+		<?php if ( false === $get_issues ) : ?>
+			<p>
+				<?php
+				printf(
+					/* translators: %s: URL to Site Health screen. */
+					__( 'Site health checks will automatically run periodically to gather information about your site. You can also <a href="%s">visit the Site Health screen</a> to gather information about your site now.' ),
+					esc_url( admin_url( 'site-health.php' ) )
+				);
+				?>
+			</p>
+		<?php else : ?>
+			<p>
+				<?php if ( $issues_total <= 0 ) : ?>
+					<?php _e( 'Great job! Your site currently passes all site health checks.' ); ?>
+				<?php elseif ( 1 === (int) $issue_counts['critical'] ) : ?>
+					<?php _e( 'Your site has a critical issue that should be addressed as soon as possible to improve its performance and security.' ); ?>
+				<?php elseif ( $issue_counts['critical'] > 1 ) : ?>
+					<?php _e( 'Your site has critical issues that should be addressed as soon as possible to improve its performance and security.' ); ?>
+				<?php elseif ( 1 === (int) $issue_counts['recommended'] ) : ?>
+					<?php _e( 'Your site&#8217;s health is looking good, but there is still one thing you can do to improve its performance and security.' ); ?>
+				<?php else : ?>
+					<?php _e( 'Your site&#8217;s health is looking good, but there are still some things you can do to improve its performance and security.' ); ?>
+				<?php endif; ?>
+			</p>
+		<?php endif; ?>
 
-	<?php if ( $issues_total > 0 && false !== $get_issues ) : ?>
-		<p>
-			<?php
-			printf(
-				/* translators: 1: Number of issues. 2: URL to Site Health screen. */
-				_n(
-					'Take a look at the <strong>%1$d item</strong> on the <a href="%2$s">Site Health screen</a>.',
-					'Take a look at the <strong>%1$d items</strong> on the <a href="%2$s">Site Health screen</a>.',
-					$issues_total
-				),
-				$issues_total,
-				esc_url( admin_url( 'site-health.php' ) )
-			);
-			?>
-		</p>
-	<?php endif; ?>
+		<?php if ( $issues_total > 0 && false !== $get_issues ) : ?>
+			<p>
+				<?php
+				printf(
+					/* translators: 1: Number of issues. 2: URL to Site Health screen. */
+					_n(
+						'Take a look at the <strong>%1$d item</strong> on the <a href="%2$s">Site Health screen</a>.',
+						'Take a look at the <strong>%1$d items</strong> on the <a href="%2$s">Site Health screen</a>.',
+						$issues_total
+					),
+					$issues_total,
+					esc_url( admin_url( 'site-health.php' ) )
+				);
+				?>
+			</p>
+		<?php endif; ?>
+	</div>
 
 	<?php
 }