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
This commit is contained in:
Sergey Biryukov
2021-05-10 14:54:57 +00:00
parent 180e7a2721
commit 2b2f309d6f
2 changed files with 68 additions and 42 deletions

View File

@@ -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;