Premium Analytics: post detail parity — overflow fixes, inline date presets, no comparison

[dognose24]

Part of WOOA7S-1785 · Based on trunk (no longer stacked on #50970 — nothing here depends on it after the rescope below)

Why

Applies to the post/email detail page everything proven out on the video detail page (#50970): the overflow bugs found by live debugging, the timezone day-shift, and the mock's inline date presets without a comparison control.

Proposed changes

• Bug fixes: contain: inline-size (long unbroken titles no longer force page-level horizontal scroll; the breadcrumb half of that fix is component-owned in Premium Analytics: fix the breadcrumb overflow behind the display:contents trail #51085, tracked upstream as admin-ui: Page header breadcrumbs slot lets a nowrap crumb's min-content widen the page, defeating the crumb's own ellipsis WordPress/gutenberg#81297); aspect-ratio: 1 so the boot shell's img reset can't squash the featured image; widgets/post-views bucket keys parsed as site-local calendar dates (parseSiteDateTime, UTC-12 regression test) fixing the one-day shift on negative-offset sites; height → block-size nit.
• No comparison, per the design: post-views and email-time-series drop their comparison series, and DateFiltersPanel gains a minimal showComparison prop so the Compare control hides at the existing fixed-bar call site. Comparison params stay in the URL untouched (the widgets ignore them) so the breadcrumb's dashboard link carries the user's comparison settings back out — mirroring the review outcome on Premium Analytics: align the video detail composition with the design mocks #50970.
• Inline date presets on the summary's title row, per the mock: one header row — title left, presets right, vertically centered. The summary grows into the row's free space and truncates down to a 400px floor; its contain: inline-size keeps a long title from wrapping the row. Known rough edge, deferred to Premium Analytics: let DateFiltersPanel measure an external container with a reserved share #51088: the panel still measures its own root, which in this shrink-to-fit slot always sees its own content width — so the presets keep their full layout and narrow rows degrade poorly until the external-measurement wiring lands there, for both detail pages at once.

Testing

• pnpm test in projects/packages/premium-analytics — 1622 tests green, including the new UTC-12 bucket regression test and the no-comparison assertions.
• On a site in a negative-offset timezone (e.g. UTC-12), the post detail views chart buckets no longer shift a day.
• Post/email detail: the date filters bar shows no Compare control and the widgets render no comparison series; comparison params in the URL are preserved and carried back to the dashboard via the breadcrumb.
• A post with a long unbroken title no longer forces horizontal scroll from the summary card (the breadcrumb crumb's half of that fix is Premium Analytics: fix the breadcrumb overflow behind the display:contents trail #51085 — until it merges, the crumb still overflows on this branch); the featured image keeps its square ratio.

Screenshots

Date filter on desktop

Wrapped date filter on mobile

[github-actions]

Are you an Automattician? Please test your changes on all WordPress.com environments to help mitigate accidental explosions.

• To test on WoA, go to the Plugins menu on a WoA dev site. Click on the "Upload" button and follow the upgrade flow to be able to upload, install, and activate the Jetpack Beta plugin. Once the plugin is active, go to Jetpack > Jetpack Beta, select your plugin (Jetpack or WordPress.com Site Helper), and enable the update/wooa7s-1785-post-detail-parity branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/wooa7s-1785-post-detail-parity

bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/wooa7s-1785-post-detail-parity

Interested in more tips and information?

• In your local development environment, use the jetpack rsync command to sync your changes to a WoA dev blog.
• Read more about our development workflow here: PCYsg-eg0-p2
• Figure out when your changes will be shipped to customers here: PCYsg-eg5-p2

[github-actions]

Thank you for your PR!

When contributing to Jetpack, we have a few suggestions that can help us test and review your patch:

• ✅ Include a description of your PR changes.
  
• ✅ Add a "[Status]" label (In Progress, Needs Review, ...).
  
• 🔴 Add testing instructions.
  
• 🔴 Specify whether this PR includes any changes to data or privacy.
  
• ✅ Add changelog entries to affected projects
  

This comment will be updated as you work on your PR and make changes. If you think that some of those checks are not needed for your PR, please explain why you think so. Thanks for cooperation 🤖

---

🔴 Action required: Please include detailed testing steps, explaining how to test your change, like so:

## Testing instructions:

* Go to '..'
*

---

🔴 Action required: We would recommend that you add a section to the PR description to specify whether this PR includes any changes to data or privacy, like so:

## Does this pull request change what data or activity we track or use?

My PR adds *x* and *y*.

---

Follow this PR Review Process:

1. Ensure all required checks appearing at the bottom of this PR are passing.
2. Make sure to test your changes on all platforms that it applies to. You're responsible for the quality of the code you ship.
3. You can use GitHub's Reviewers functionality to request a review.
4. When it's reviewed and merged, you will be pinged in Slack to deploy the changes to WordPress.com simple once the build is done.

If you have questions about anything, reach out in #jetpack-developers for guidance!

[jp-launch-control]

Code Coverage Summary

No summary data is available for parent commit 844736f, so cannot calculate coverage changes. 😴

If that commit is a feature branch rather than a trunk commit, this is expected. Otherwise, this should be updated once coverage for 844736f is available.

Full summary · PHP report · JS report

[chihsuan]

Thanks @dognose24

I noticed UTM and highlights are still rendering comparison data. I wonder if it's possible to preserve the URL for the breadcrumb round trip, but remove comp/compare_* from the reportParams injected into every widget in this page’s layout? That would make the page-wide invariant hold by construction.

[chihsuan]

Could we remove this fallback instead of allowing it to produce the wrong instant?

bucket.date is generated with format(start, 'yyyy-MM-dd'), so parseSiteDateTime() should always succeed here. If it ever does not, parseISO(bucket.date) parses browser-local midnight rather than site-local midnight, reintroducing the day-shift bug this change fixes.

[dognose24]

Fixed in 10fc2e2 — dropped the fallback. bucket.date comes from format( start, 'yyyy-MM-dd' ) so parseSiteDateTime() can't fail in practice; if it ever does, the point is now dropped (flatMap) rather than re-anchored to a browser-local instant that would reintroduce the day shift.

[dognose24]

Thanks @chihsuan! Adopted your suggestion in 10fc2e2 — the invariant now holds by construction. usePostDetailTabs injects comparison-stripped reportParams (via a new omitComparisonReportParams() helper in the routing package) into every layout entry, so WidgetRoot takes the attributes branch instead of falling back to the raw URL search. UTM insights and highlights no longer render deltas, while the URL keeps comp/compare_* for the breadcrumb round trip. Covered by a hook test asserting every layout entry's reportParams carries the window and post_id but none of the comparison keys.

The video detail page (#50970) uses the same widgets-ignore approach — I'll port this construction there as a follow-up.

[chihsuan]

Thanks @dognose24 Looks good. 🚢

[dognose24]

A note on the current shape of this branch since your last review: it is the state you reviewed, plus your two notes addressed (comparison stripped from the injected reportParams via omitComparisonReportParams(), parseISO fallback dropped), a one-line pnpm-lock refresh for the crypto-js deprecation flag, and one commit (b67f72b) that puts the date filter presets on the summary's title row per the design mocks — title left, presets right, 400px summary floor.

No shared-component changes beyond the already-reviewed showComparison prop: the panel keeps measuring itself, which in this shrink-to-fit slot always sees its own content width — so the presets stay in their full layout and narrow rows degrade poorly. That is a known, accepted rough edge here; the external-measurement wiring (containerElement / reservedInlineSize) ships as a follow-up in #51088. The breadcrumb overflow fix lives in #51085.

[chihsuan]

🚢