Adjust desktop layout on email reporting email-report template

[benbowler]

Feature Description

The explicit "desktop" responsive variant of the email-reporting template as missed in v0. Review and address changes using responsive design where possible with client support. Default to the mobile layout for clients that don't support this.

Specific FIGMA designs.

Specifically address the following items pulled forward from the code review on #11549:

ITEM 4:
For this one, we have permanently wrapped the 'Compared to previous 7 days' on 2 lines.
However, should we implement a breakpoint check here given that the Figma mocks has a desktop view where it's on a single line?

Details

______________________________________________________________________

ITEM 7:
On desktop, the header section has a different layout/sequence compared to mobile view (what we've implemented across)
On Desktop:

• Google logo is centred
• Then the website name.

Weirdly, there is no graphic for the desktop view. Is that expected?
The sequences should be double-checked.

Details

Desktop figma:

Mobile figma:

---

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

Acceptance criteria

• On all viewports, the email header displays the Site Kit logo to the left, in a "condensed layout" (Site Kit logo to the left of the stars)
• Stars should appear on all viewports
• The "Compared to previous 7 days" text displays on a single line at tablet/desktop widths
• Responsive changes need only apply in supported email clients, falling back to the mobile layout in all other cases.

Implementation Brief

Backend (PHP Templates)

• Update file includes/Core/Email_Reporting/templates/email-report/template.php:

  • Update the <style> block adding @media query for desktop breakpoint (min-width ~480px)
  • Define desktop-specific class overrides for header layout and subtitle width
  • Maintain mobile-first inline styles as fallback for email clients that strip <style> blocks

• Update file includes/Core/Email_Reporting/templates/email-report/parts/header.php:

  • Restructure header table to support responsive desktop layout
  • Add classes to table cells for media query targeting
  • For desktop (via media query): center the Site Kit logo row, reposition shooting stars, display website domain below the title
  • For mobile (inline styles): preserve current compact layout with logo on left
  • Maintain MSO conditional comments for Outlook compatibility

• Update file includes/Core/Email_Reporting/templates/email-report/parts/section-metrics.php:

  • Add class to the subtitle cell (currently has width: 110px constraint)
  • Increase width via media query to accommodate "Compared to previous 7 days" on single line at desktop widths (approximately 150px or auto)

Test Coverage

• No additional test coverage required.

QA Brief

• Use the tester plugin to load an email template with Search Console and Analytics data.
• The "Compared to previous 7 days" text in the first two sections only should be on one line on tablet/desktop only.
  • Subsequent sections (eg. "How are people finding me?" and after) should still have a wrapped "Compared to previous 7 days" subtitle because of the nearby numbers unrelated to the "Compared to previous 7 days" data.
• The "Site Kit" header should be on the left of the stars, at the top of the email, on all viewports.

The styles here should be tested in various email clients by manually triggering an email to be sent using cron plugins. (Install Crontrol plugin, and under Tools > Cron Event trigger the initiator event for a frequency—eg. weekly. Wait one minute or immediately trigger the CRON worker to receive the email to your email address, and test in various email clients to ensure the styling works.)

Changelog entry

• Adjust desktop layout on email reporting email-report template.

[zutigrm]

AC & IB ✅