Stats: Fix styling on Odyssey Stats for Navigation Improvement #103369

dognose24 · 2025-05-13T07:11:12Z

Proposed Changes

Fix mobile styling issue on Odyssey Stats.

Stats navigation tabs - mobile

Before	After

Summary page nav - mobile

Before	After

Locations summary page - mobile

Before	After

Why are these changes being made?

Testing Instructions

Spin this change with the local self-hosted site: cd /some-path-to/wp-calypso/apps/odyssey-stats && STATS_PACKAGE_PATH=/some-path-to/jetpack/projects/packages/stats-admin yarn dev.
Navigate to Stats > Traffic page.
Inspect the page on the mobile viewport.
Ensure the navigation tabs dropdown item works with padding.
Navigate to the Locations summary page.
Ensure the summary nav dropdown and item list label work reasonably.

Pre-merge Checklist

Has the general commit checklist been followed? (PCYsg-hS-p2)
Have you written new tests for your changes?
Have you tested the feature in Simple (P9HQHe-k8-p2), Atomic (P9HQHe-jW-p2), and self-hosted Jetpack sites (PCYsg-g6b-p2)?
Have you checked for TypeScript, React or other console errors?
Have you used memoizing on expensive computations? More info in Memoizing with create-selector and Using memoizing selectors and Our Approach to Data
Have we added the "[Status] String Freeze" label as soon as any new strings were ready for translation (p4TIVU-5Jq-p2)?
- For UI changes, have we tested the change in various languages (for example, ES, PT, FR, or DE)? The length of text and words vary significantly between languages.
For changes affecting Jetpack: Have we added the "[Status] Needs Privacy Updates" label if this pull request changes what data or activity we track or use (p4TIVU-aUh-p2)?

github-actions · 2025-05-13T07:11:25Z

Calypso Live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-143986

Jetpack Cloud live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-143986&env=jetpack

Automattic for Agencies live (direct link)

	https://calypso.live?image=registry.a8c.com/calypso/app:build-143986&env=a8c-for-agencies

matticbot · 2025-05-13T07:11:32Z

This PR modifies the release build for the following Calypso Apps:

For info about this notification, see here: PCYsg-OT6-p2

blaze-dashboard
command-palette-wp-admin
help-center
notifications
odyssey-stats
wpcom-block-editor

To test WordPress.com changes, run install-plugin.sh $pluginSlug update/stats_navigation_improve_fix_odyssey_stats_styles on your sandbox.

matticbot · 2025-05-13T07:13:12Z

This PR does not affect the size of JS and CSS bundles shipped to the user's browser.

Generated by performance advisor bot at iscalypsofastyet.com.

* Fix main navigation mobile dropdown item padding * Make mobile summary nav dropdown 100% width * Fix Locations summary mobile item list label padding

* flip the flag * Fix stats-navigation tab selectors for tests * Stats: Fix e2e tests by handling new selectors for the new nav header (#103384) * Add a new utility function for clicking on new navigation * Handle selectors for the new navigation header in e2e tests * Don't update the selector for other tests apart from stats * Adjust styling for summary nav on mobile (#103363) * Remove `preventWidows` from `client/components` (#103187) * Remove `preventWidows` from `client/components` * CardHeading * VisibleDaysLimitUpsell * Add new site for A4A and add styles * Remove preventWidows and disablePreventWidows from FormattedHeader * Happiness support * BackupGettingStarted * JetpackProductCardFeaturesItem * JetpackProductCard * Jetpack backups * Backup successful * IntroPricingBanner * JetpackDisconnected * JetpackDisconnectedWPCOM * LicensingActivation * PurchaseDetail * SeoPreviewNudge * Add new site popover * theme collection * Update test snapshots * Fix Storybook compilation in components package (#103362) * Add conditionNames for Storybook Webpack build * Editor: Stop preloading section (#103334) * Editor: Stop preloading section * Get rid of actionHoverCallback * Breadcrumbs: Add `renderItemLink ` prop (#103321) * SummaryButton: Add `renderLink` prop * Rename to renderItemLink, split Item vs BreadcrumbsItemProps, refactor implementation * Prevent flickering in Storybook when opning menu in compact mode * Add open for extension to docs * add a test and console.log in story * feedback --------- Co-authored-by: Marco Ciampini <[email protected]> * Update different A4A labels to sentence case (#103238) * Update different A4A labels to sentence case * Fix one more occurence * Showing multiple domain selection on new-hosted-site flow (#103359) * E2E Auth: Fix apple login flow to wpcom and woo (#103357) * Encript updated path * E2E auth apple: fix wpcom and woo auth flows * Follow up of #103321 (#103382) * WooCoreProfilerMasterbar: fix useSelector and useTranslate usages (#103373) * Fix/stop import redirect after failed wix (#103358) * Redirect to the correct step when a wix migration fails * remove hardcoded true --------- Co-authored-by: Andrés Blanco <[email protected]> * Notifications settings: change Publicized copy (#103265) * change copy for Jetpack Social notification setting (formerly Publicized) * do not translate brand name * Improves the design for the Migration Requested page (#103183) * Improves the design for the Migration Requested page * Remove card borders * A4A: Fix the background color (#103389) * Revert "Notifications settings: change Publicized copy (#103265)" (#103392) This reverts commit c320da3. * Apps: Fix Odyssey translation extraction. (#103393) * change Publicized copy to Jetpack Social brand, add translators comment (#103395) * Fix e2e onboarding new hosted site tests (#103383) * Upgrade importers to container v2 (#103024) * Upgrade importers to container v2 * remove test string * show title inside the import drag if not using container v2 * fix heading wp importer * fix progressbar * hacky but working * apply Gabriel's suggestions --------- Co-authored-by: Andrés Blanco <[email protected]> * Apps: Fix Odyssey widget reactivity. (#103400) * STATS-64: Don't dispatch legacy country data (#103376) * STATS-67 - Don't navigate to the current tab if we are already on the current tab (#103379) * STATS-67: Don't reload page if current tab is already the selected tab * Add comment as to why the tab selected conditionally * Stats: Fix styling on Odyssey Stats for Navigation Improvement (#103369) * Fix main navigation mobile dropdown item padding * Make mobile summary nav dropdown 100% width * Fix Locations summary mobile item list label padding * Fix stats-navigation tab selectors for tests * Stats: Fix e2e tests by handling new selectors for the new nav header (#103384) * Add a new utility function for clicking on new navigation * Handle selectors for the new navigation header in e2e tests * Don't update the selector for other tests apart from stats * remove has-fixed-nav when new nav enabled * avoid loading style conflicts --------- Co-authored-by: Nikhil <[email protected]> Co-authored-by: Dognose <[email protected]> Co-authored-by: Dognose <[email protected]> Co-authored-by: tellthemachines <[email protected]> Co-authored-by: Andrew Duthie <[email protected]> Co-authored-by: Marin Atanasov <[email protected]> Co-authored-by: Nik Tsekouras <[email protected]> Co-authored-by: Marco Ciampini <[email protected]> Co-authored-by: Wojtek Naruniec <[email protected]> Co-authored-by: Paulo Marcos Trentin <[email protected]> Co-authored-by: Bogdan Nikolic <[email protected]> Co-authored-by: Jarda Snajdr <[email protected]> Co-authored-by: Andrés Blanco <[email protected]> Co-authored-by: Andrés Blanco <[email protected]> Co-authored-by: Christian Gastrell <[email protected]> Co-authored-by: valterlorran <[email protected]> Co-authored-by: arthur791004 <[email protected]> Co-authored-by: sdnunca <[email protected]>

dognose24 requested a review from a team May 13, 2025 07:11

matticbot added the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 13, 2025

dognose24 self-assigned this May 13, 2025

dognose24 added the [Feature] Stats Everything related to our analytics product at /stats/ label May 13, 2025

dognose24 added 2 commits May 13, 2025 15:12

Fix main navigation mobile dropdown item padding

cf73788

Make mobile summary nav dropdown 100% width

b9feec4

Fix Locations summary mobile item list label padding

b3e1784

dognose24 force-pushed the update/stats_navigation_improve_fix_odyssey_stats_styles branch from 8092a5b to b3e1784 Compare May 13, 2025 07:14

Nikschavan approved these changes May 13, 2025

View reviewed changes

kangzj merged commit d997483 into trunk May 13, 2025
14 checks passed

kangzj deleted the update/stats_navigation_improve_fix_odyssey_stats_styles branch May 13, 2025 21:31

github-actions bot removed the [Status] Needs Review The PR is ready for review. This also triggers e2e canary tests and wp-desktop tests automatically. label May 13, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Stats: Fix styling on Odyssey Stats for Navigation Improvement #103369

Stats: Fix styling on Odyssey Stats for Navigation Improvement #103369

Uh oh!

dognose24 commented May 13, 2025 •

edited by kangzj

Loading

Uh oh!

github-actions bot commented May 13, 2025 •

edited by matticbot

Loading

Uh oh!

matticbot commented May 13, 2025

Uh oh!

matticbot commented May 13, 2025

Uh oh!

Uh oh!

Uh oh!

Stats: Fix styling on Odyssey Stats for Navigation Improvement #103369

Stats: Fix styling on Odyssey Stats for Navigation Improvement #103369

Uh oh!

Conversation

dognose24 commented May 13, 2025 • edited by kangzj Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Proposed Changes

Stats navigation tabs - mobile

Summary page nav - mobile

Locations summary page - mobile

Why are these changes being made?

Testing Instructions

Pre-merge Checklist

Uh oh!

github-actions bot commented May 13, 2025 • edited by matticbot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

matticbot commented May 13, 2025

Uh oh!

matticbot commented May 13, 2025

Uh oh!

Uh oh!

Uh oh!

dognose24 commented May 13, 2025 •

edited by kangzj

Loading

github-actions bot commented May 13, 2025 •

edited by matticbot

Loading