site-kit-wp: Inconsistent layout between similar tiles in zero states

Feature Description

As reported by @aaemnnosttv in Bug Bash (Asana task):

Ideally the areas of the tile would be aligned across tiles regardless of the length of the titles or other elements

Also

Text should be aligned to bottom to address.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The titles & content for key metric tiles in all their states (i.e. loading, error, zero, gathering, and ready) should be aligned consistently so they start in the same vertical position.
• The height of the error state for key metric tiles should consistently be the same, similar to other states.

Implementation Brief

• In assets/sass/components/key-metrics/_googlesitekit-km-widget-tile.scss:
  • Set the height of .googlesitekit-km-widget-tile--error to 100%.

The suggested solution is to use CSS subgrid (supported by all major browsers. https://caniuse.com/?search=subgrid). However it is not so straightforward since the elements we need to align are deeply nested relative to the parent container for all the key metric widgets which is 4 levels down. So we need to have nested subgrids. The code should do the following:

• Define the grid rows for the .googlesitekit-widget-area--mainDashboardKeyMetricsPrimary .googlesitekit-widget-area-widgets .mdc-layout-grid__inner element.
  • The rows should be defined starting at the tablet breakpoint.
    • Since the cells are rendered in a 2x2 grid, we need to define 4 rows for the tablet viewport. (auto 1fr auto 1fr)
    • From desktop breakpoint, we then define 2 rows (auto 1fr).
    • 2 rows are defined (and 4 on tablet only) because the KM widget has 2 distinct part which we need to align:
      • .googlesitekit-km-widget-tile__title-container
      • .googlesitekit-km-widget-tile__body
    • 4 rows are defined for tablets because each widget will span across 2 rows (see above).
• Create subgrid for all the children within the selector above (.mdc-layout-grid__inner) as follows:
  • grid-template-columns: subgrid;
  • grid-template-rows: subgrid;
• Make necessary adjustments to the CSS so that the content within the subgrids take the appropriate columns and rows. For instance since we are inheriting the columns and rows from the main grid, the children all have 12 columns. So we need to specify to take all the available space:
  • grid-column: 1 / -1;
  • grid-row: 1 / -1;

SASS POC lines to be added to assets/sass/components/key-metrics/_googlesitekit-km-widget-tile.scss: https://gist.github.com/asvinb/c9334396216a4b0063ca277b912c2853

Bumped the estimate to polish the POC add enough time to QA all the possible scenarios across breakpoints.

Test Coverage

• Update VRT references.

QA Brief

• Test the Key Metrics widget area at all breakpoints in the success state, ensuring that the metrics are always aligned regardless of the length of the metric title.
• Test the Key Metrics widget area at all breakpoints in the error state, ensuring that the error titles are always aligned regardless of the length of the metric title and the error action.
• Test that the widgets are always the same height regardless of contents/breakpoint.

Changelog entry

• Improve alignment of Key Metric Widget tiles, including when errors are encountered.