From f8b3f1fa8798d968020d26e9a2ab35e204839eaf Mon Sep 17 00:00:00 2001 From: Rob Pugh Date: Mon, 18 May 2026 09:52:21 -0400 Subject: [PATCH 1/2] Podcast: align tab strip padding and font size with design tokens The Podcast dashboard uses `Tabs.List variant="minimal"` inside the shared `.jp-admin-page-tabs` wrapper. The wrapper's 8px padding-inline was designed for the default Tabs.Tab variant (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 content edge. Bump the wrapper to padding-inline 2xl (24px) so the first tab aligns with the page title. Re-apply the wpds font-size token from an unlayered selector so the tabs render at 13px instead of inheriting 16px from wp-admin's unlayered `button { font-size: inherit }` reset. Matches the fix shipped in jetpack#48846 for the Search dashboard. Reported by lessbloat in the Podcast call-for-testing comments. --- .../update-podcast-tabs-padding-and-font-size | 4 ++++ .../packages/podcast/src/dashboard/style.scss | 19 +++++++++++++++++++ 2 files changed, 23 insertions(+) create mode 100644 projects/packages/podcast/changelog/update-podcast-tabs-padding-and-font-size 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..b649d43fb150 --- /dev/null +++ b/projects/packages/podcast/changelog/update-podcast-tabs-padding-and-font-size @@ -0,0 +1,4 @@ +Significance: patch +Type: changed + +Podcast dashboard: align tab strip with page header padding and apply the design-system tab font size. diff --git a/projects/packages/podcast/src/dashboard/style.scss b/projects/packages/podcast/src/dashboard/style.scss index 1224ba6b9358..f3014c531538 100644 --- a/projects/packages/podcast/src/dashboard/style.scss +++ b/projects/packages/podcast/src/dashboard/style.scss @@ -4,6 +4,25 @@ body.jetpack_page_jetpack-podcast { @include jetpack-admin-page-layout; + + // Align the first tab's content edge with the page header's start. + // admin-ui's page header sits at padding-inline 2xl (24px). The shared + // `.jp-admin-page-tabs` wrapper adds only 8px (designed for the default + // which ships with padding-inline lg = 16px, so 8 + 16 = 24 + // matches the header). With `variant="minimal"`, has 0 inline + // padding, so the wrapper has to provide the full 2xl itself. + .jp-admin-page-tabs { + padding-inline: var(--wpds-dimension-padding-2xl, 24px); + } + + // Re-apply the design token from an unlayered selector. `@wordpress/ui` + // declares `font-size: var(--wpds-typography-font-size-md)` inside + // `@layer wp-ui-components`, but wp-admin core ships an unlayered + // `button { font-size: inherit }` reset that wins, so the tab inherits + // 16px instead of the 13px the token specifies. + .jp-admin-page-tabs [role="tab"] { + font-size: var(--wpds-typography-font-size-md, 13px); + } } .podcast__loading { From 60178d72e8f4a667b534f7ca521c2b05309fb8b3 Mon Sep 17 00:00:00 2001 From: Tony Arcangelini Date: Mon, 18 May 2026 21:48:21 +0200 Subject: [PATCH 2/2] Base styles: add .jp-admin-page-tabs--minimal modifier; Podcast opts in --- .../base-styles/admin-page-layout.scss | 17 +++++++++++++++++ .../update-admin-page-tabs-minimal-modifier | 4 ++++ .../update-podcast-tabs-padding-and-font-size | 2 +- .../packages/podcast/src/dashboard/index.tsx | 2 +- .../packages/podcast/src/dashboard/style.scss | 19 ------------------- 5 files changed, 23 insertions(+), 21 deletions(-) create mode 100644 projects/js-packages/base-styles/changelog/update-admin-page-tabs-minimal-modifier 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 index b649d43fb150..c95f6c65b122 100644 --- a/projects/packages/podcast/changelog/update-podcast-tabs-padding-and-font-size +++ b/projects/packages/podcast/changelog/update-podcast-tabs-padding-and-font-size @@ -1,4 +1,4 @@ Significance: patch Type: changed -Podcast dashboard: align tab strip with page header padding and apply the design-system tab font size. +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' ) } diff --git a/projects/packages/podcast/src/dashboard/style.scss b/projects/packages/podcast/src/dashboard/style.scss index f3014c531538..1224ba6b9358 100644 --- a/projects/packages/podcast/src/dashboard/style.scss +++ b/projects/packages/podcast/src/dashboard/style.scss @@ -4,25 +4,6 @@ body.jetpack_page_jetpack-podcast { @include jetpack-admin-page-layout; - - // Align the first tab's content edge with the page header's start. - // admin-ui's page header sits at padding-inline 2xl (24px). The shared - // `.jp-admin-page-tabs` wrapper adds only 8px (designed for the default - // which ships with padding-inline lg = 16px, so 8 + 16 = 24 - // matches the header). With `variant="minimal"`, has 0 inline - // padding, so the wrapper has to provide the full 2xl itself. - .jp-admin-page-tabs { - padding-inline: var(--wpds-dimension-padding-2xl, 24px); - } - - // Re-apply the design token from an unlayered selector. `@wordpress/ui` - // declares `font-size: var(--wpds-typography-font-size-md)` inside - // `@layer wp-ui-components`, but wp-admin core ships an unlayered - // `button { font-size: inherit }` reset that wins, so the tab inherits - // 16px instead of the 13px the token specifies. - .jp-admin-page-tabs [role="tab"] { - font-size: var(--wpds-typography-font-size-md, 13px); - } } .podcast__loading {