diff --git a/projects/js-packages/base-styles/admin-page-layout.scss b/projects/js-packages/base-styles/admin-page-layout.scss index b14d2b26845b..5effd6e6bcce 100644 --- a/projects/js-packages/base-styles/admin-page-layout.scss +++ b/projects/js-packages/base-styles/admin-page-layout.scss @@ -310,6 +310,23 @@ $jp-breakpoint-mobile: 782px; padding-inline: var(--wpds-dimension-padding-sm, 8px); } + // Opt-in modifier for hosts that render ``. + // Minimal tabs ship with `padding-inline: 0`, so the wrapper has to + // provide the full 2xl itself to keep the first tab flush with the + // header start. + .jp-admin-page-tabs--minimal { + padding-inline: var(--wpds-dimension-padding-2xl, 24px); + } + + // Re-apply `--wpds-typography-font-size-md` from an unlayered selector. + // `@wordpress/ui` declares the token inside `@layer wp-ui-components`, + // but wp-admin core ships an unlayered `button { font-size: inherit }` + // reset that always wins layered rules. Remove once upstream wires + // `Tabs.Tab` into `@wordpress/ui`'s `global-css-defense` module. + .jp-admin-page-tabs [role="tab"] { + font-size: var(--wpds-typography-font-size-md, 13px); + } + // ── Mobile: admin bar grows to 46px; sidebar goes off-canvas ───── // Match `.folded` and `.auto-fold` explicitly: both outrank the bare // `#wpbody-content` selector on specificity, so the media query needs diff --git a/projects/js-packages/base-styles/changelog/update-admin-page-tabs-minimal-modifier b/projects/js-packages/base-styles/changelog/update-admin-page-tabs-minimal-modifier new file mode 100644 index 000000000000..33156754e6cb --- /dev/null +++ b/projects/js-packages/base-styles/changelog/update-admin-page-tabs-minimal-modifier @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Admin page mixin: add `.jp-admin-page-tabs--minimal` modifier for hosts that render ``, and re-apply the tab font-size design token from an unlayered selector to defeat wp-admin's `button { font-size: inherit }` reset. diff --git a/projects/packages/podcast/changelog/update-podcast-tabs-padding-and-font-size b/projects/packages/podcast/changelog/update-podcast-tabs-padding-and-font-size new file mode 100644 index 000000000000..c95f6c65b122 --- /dev/null +++ b/projects/packages/podcast/changelog/update-podcast-tabs-padding-and-font-size @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Podcast dashboard: opt into the shared `jp-admin-page-tabs--minimal` modifier so the tab strip aligns with the page header and labels use the design-system font size. diff --git a/projects/packages/podcast/src/dashboard/index.tsx b/projects/packages/podcast/src/dashboard/index.tsx index 815e9a87bf7a..e5308993aee6 100644 --- a/projects/packages/podcast/src/dashboard/index.tsx +++ b/projects/packages/podcast/src/dashboard/index.tsx @@ -174,7 +174,7 @@ const App = () => { return ( -
+
{ __( 'Stats', 'jetpack-podcast' ) }