Podcast: align Stats tab padding

[robertbpugh]

Proposed changes

• Bump .jp-admin-page-tabs padding-inline from the wrapper default (8px) to --wpds-dimension-padding-2xl (24px) on the Podcast dashboard, so the Stats tab's content edge lines up with the page header start.
• Re-apply --wpds-typography-font-size-md (13px) from an unlayered selector so the tab labels render at 13px instead of inheriting 16px from wp-admin's button { font-size: inherit } reset.

Why

The Podcast dashboard renders <Tabs.List variant="minimal"> inside the shared .jp-admin-page-tabs wrapper. The wrapper's 8px padding was designed for the default <Tabs.Tab> (which ships with 16px self-padding, summing to 24px). With variant="minimal" the tab has 0 inline padding, so the strip starts ~16px to the left of the page header. Same root cause that shipped a fix for the Search dashboard in #48846, applied to Podcast.

Related product discussion/links

• Reported by lessbloat in the Podcast call-for-testing thread (PODS).
• Sister fix for Search: Search dashboard: adopt the unified @wordpress/ui tab pattern #48846.

Testing instructions

1. Load the Podcast admin page (Jetpack > Podcast on a site where the package is enabled).
2. Confirm the Stats tab's left edge is flush with the page title "Podcast" content edge (24px from the page-content edge).
3. Confirm the tab labels render at 13px, not 16px.
4. Before/after screenshots welcome from anyone who has a working preview environment.

[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/podcast-tabs-padding branch.
• To test on Simple, run the following command on your sandbox:

bin/jetpack-downloader test jetpack update/podcast-tabs-padding

bin/jetpack-downloader test jetpack-mu-wpcom-plugin update/podcast-tabs-padding

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: 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

This PR did not change code coverage!

That could be good or bad, depending on the situation. Everything covered before, and still is? Great! Nothing was covered before? Not so great. 🤷

Full summary · PHP report · JS report

[Copilot]

Pull request overview

Applies the same tab-strip styling fix from the Search dashboard (#48846) to the Podcast dashboard: increases inline padding on .jp-admin-page-tabs to align the first variant="minimal" tab with the page header, and re-applies the --wpds-typography-font-size-md token via an unlayered selector to override wp-admin's button { font-size: inherit } reset.

Changes:

• Add padding-inline: var(--wpds-dimension-padding-2xl, 24px) to .jp-admin-page-tabs within the Podcast page scope.
• Re-apply 13px font-size token on [role="tab"] from an unlayered selector.
• Add changelog entry.

Reviewed changes

Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.

File	Description
projects/packages/podcast/src/dashboard/style.scss	Adds scoped padding and tab font-size overrides to align with design tokens.
projects/packages/podcast/changelog/update-podcast-tabs-padding-and-font-size	Patch-level changelog entry describing the visual fix.

[arcangelini]

+------------------------------------------------------------------+--------+
| Check                                                            | Result |
+------------------------------------------------------------------+--------+
| Follows WordPress coding standards and best practices            |   ✅   |
| No security issues (escaping, sanitization, SQL, XSS, auth)      |   ✅   |
| No new warnings, fatals, errors, or type errors (PHP/TS)         |   ✅   |
| Function calls verified (exist, correct params, return handled)  |   ✅   |
| No potential mid-deploy issues                                   |   ✅   |
| Follows existing patterns in the repo                            |   ✅   |
| i18n handled (translations, text domain, plural forms)           |   ✅   |
| Accessibility (a11y) handled for UI changes                      |   ✅   |
| No performance or caching regressions                            |   ✅   |
| Backwards compatible (filters, hooks, REST, exports, schema)     |   ✅   |
+------------------------------------------------------------------+--------+

Risk Assessment: LOW
Approval Percentage: 95%

[simison]

Pretty sure this tab spacing should be handled at the Jetpack components level already, so something is off here. 🤔 @dhasilva or @CGastrell might know more

[simison]

Re-apply --wpds-typography-font-size-md (13px) from an unlayered selector so the tab labels render at 13px instead of inheriting 16px from wp-admin's button { font-size: inherit } reset.

This is unneeded as the bug is fixed in @wordpress/ui package 1-2 versions ago, so the package needs updating in Jetpack: PR.

[arcangelini]

@simison I checked and I didn't see anything. The Tabs padding is also being fixed manually in Search https://github.com/Automattic/jetpack/pull/48846/changes

As for the font, I am not seeing anything in the newer versions that would fix this but maybe I am missing something?

[simison]

Did you test that the latest package doesn't fix it? Should've been part of these (and there were many more PRs) and if not fixed, it would be important to report upstream rather than keep fixing locally:

WordPress/gutenberg#76135
WordPress/gutenberg#76783

[simison]

I checked and I didn't see anything. The Tabs padding is also being fixed manually in Search https://github.com/Automattic/jetpack/pull/48846/changes

Can you just move the fix level up to the Jetpack component? :-)

[arcangelini]

@simison Happy to move the padding fix upstream.

As for the font. I pulled @wordpress/ui@0.13.0 (and the 1.0.1-next prerelease) and read tabs/tab.tsx directly — Tabs.Tab does NOT apply defenseStyles.button:

// 0.13.0 and 1.0.1-next both:
<_Tabs.Tab className={ clsx( styles.tab, className ) } ... />
//                          ^^^ no defenseStyles.button

And .tab still declares font-size: var(--wpds-typography-font-size-md) inside @layer wp-ui-components, so the unlayered button { font-size: inherit } reset still wins. Tab was missed when the defense was wired up everywhere else. So this is likely something that needs to be fixed upstream as well.

[simison]

Yep! Definitely a bug in @wordpress/ui, then.