From b7a79cf1267f5f69705853ff54402c7439609d33 Mon Sep 17 00:00:00 2001
From: Jonathan Desrosiers <desrosj@git.wordpress.org>
Date: Thu, 16 May 2019 18:29:47 +0000
Subject: [PATCH] Site Health: Improve alignment and spacing for section
 headers.

This changes the CSS for Site Health headers to use flexbox, which helps ensure the text is vertically aligned center and consistently spaced in both the Status and Info tabs. It also fixes an issue where the loading spinner GIF was cut off on smaller screens (originally reported in #47203.

Props Presskopp, odminstudios, kjellr, afercia, desrosj, hedgefield, ianbelanger, xavortm.
Fixes #47063.

git-svn-id: https://develop.svn.wordpress.org/trunk@45322 602fd350-edb4-49c9-b593-d223f7449a82
---
 src/wp-admin/css/site-health.css | 19 ++++++++++---------
 1 file changed, 10 insertions(+), 9 deletions(-)

diff --git a/src/wp-admin/css/site-health.css b/src/wp-admin/css/site-health.css
index 4294924bf9..d6db9a6ae5 100644
--- a/src/wp-admin/css/site-health.css
+++ b/src/wp-admin/css/site-health.css
@@ -268,13 +268,16 @@
 	border: 0;
 	color: #32373c;
 	cursor: pointer;
-	display: block;
+	display: flex;
 	font-weight: 400;
 	margin: 0;
 	padding: 1em 3.5em 1em 1.5em;
+	min-height: 46px;
 	position: relative;
 	text-align: left;
 	width: 100%;
+	align-items: center;
+	justify-content: space-between;
 }
 
 .wp-core-ui .button.site-health-view-passed {
@@ -297,9 +300,9 @@
 }
 
 .health-check-accordion-trigger .title {
-	display: inline-block;
 	pointer-events: none;
 	font-weight: 600;
+	flex-grow: 1;
 }
 
 .health-check-accordion-trigger .icon,
@@ -316,7 +319,6 @@
 }
 
 .health-check-accordion-trigger .badge {
-	float: right;
 	padding: 0.1rem 0.5rem 0.15rem;
 	color: #32373c;
 	font-weight: 600;
@@ -377,10 +379,10 @@
 }
 
 .health-check-wp-paths-sizes.spinner {
-	position: absolute;
 	visibility: visible;
 	float: none;
 	margin: 0 4px;
+	flex-shrink: 0;
 }
 
 @media screen and (max-width: 782px) {
@@ -398,14 +400,13 @@
 		margin-left: 10px;
 	}
 
-	.health-check-accordion-trigger .title {
-		display: block;
-		margin-bottom: 1em;
+	.site-health-issues-wrapper .health-check-accordion-trigger {
+		flex-direction: column;
+		align-items: flex-start;
 	}
 
 	.health-check-accordion-trigger .badge {
-		float: left;
-		margin: 0;
+		margin: 1em 0 0;
 	}
 }