[wp-trac] [WordPress Trac] #52966: Site Health dashboard panel - css enhancement to improve UI

[WordPress Trac]

#52966: Site Health dashboard panel - css enhancement to improve UI
-------------------------------------+-------------------------------------
 Reporter:  mblach                   |       Owner:  (none)
     Type:  enhancement              |      Status:  new
 Priority:  normal                   |   Milestone:  Awaiting Review
Component:  Site Health              |     Version:  5.4
 Severity:  normal                   |  Resolution:
 Keywords:  has-screenshots needs-   |     Focuses:  ui, css,
  testing                            |  administration
-------------------------------------+-------------------------------------

Comment (by hedgefield):

 Hey, welcome! That's a good idea, on wider screens it would look much
 nicer side by side like that.

 I took the liberty to rewrite it using css grids, to get a slightly more
 flexible result for translations and make it easy to switch between a one-
 column layout for smaller screens and a two-column layout on wider
 screens.

 For .health-check-title-section, just add:
 **text-align: center;
 padding-top: 8px;
 display: block;**

 Then, wrap the two <p>'s below it in a new div, with these css rules:
 **border-left: 1px solid #c3c4c7;
 padding-left: 16px;**

 Next, wrap those two divs in another div with these css rules:
 **display: grid;
 grid-template-columns: 1fr 2fr;
 grid-auto-rows: minmax(100px, auto);
 column-gap: 16px;
 align-items: center;**

 And finally, define a media query breakpoint for <480px where it switches
 from this two-column layout to a single column layout (to do that, all you
 have to do is change the value of grid-template-columns from **1fr 2fr**
 to **100%** and turn off the border and padding on the second div.)

 Then we'll have to test the possible states in a few translations to see
 if it holds up.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/52966#comment:4>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform