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.
Built from https://develop.svn.wordpress.org/trunk@50833


git-svn-id: http://core.svn.wordpress.org/trunk@50442 1a063a9b-81f0-0310-95a4-ce76da25c4cd

wp-admin/css/site-health-rtl.css

@@ -31,10 +31,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 {
@@ -459,6 +464,25 @@
 	flex-shrink: 0;
 }
 
+/* Styling unique to the dashboard widget. */
+#dashboard_site_health .site-health-details {
+	padding-right: 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;

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;

wp-admin/includes/dashboard.php

@@ -1907,6 +1907,7 @@ function wp_dashboard_site_health() {
 		</div>
 	</div>
 
+	<div class="site-health-details">
 		<?php if ( false === $get_issues ) : ?>
 			<p>
 				<?php
@@ -1949,6 +1950,7 @@ function wp_dashboard_site_health() {
 				?>
 			</p>
 		<?php endif; ?>
+	</div>
 
 	<?php
 }

wp-includes/version.php

@@ -13,7 +13,7 @@
  *
  * @global string $wp_version
  */
-$wp_version = '5.8-alpha-50832';
+$wp_version = '5.8-alpha-50833';
 
 /**
  * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.