Skip to content

Podcast: align Stats tab padding #48908

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
arcangelini merged 2 commits into from
May 18, 2026
Merged

Podcast: align Stats tab padding #48908

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f8b3f1f
Podcast: align tab strip padding and font size with design tokens
robertbpugh May 18, 2026
60178d7
Base styles: add .jp-admin-page-tabs--minimal modifier; Podcast opts in
arcangelini May 18, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 17 additions & 0 deletions projects/js-packages/base-styles/admin-page-layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -310,6 +310,23 @@ $jp-breakpoint-mobile: 782px;
padding-inline: var(--wpds-dimension-padding-sm, 8px);
}

// Opt-in modifier for hosts that render `<Tabs.List variant="minimal">`.
// 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
Expand Down
4 changes: 4 additions & 0 deletions projects/js-packages/base-styles/changelog/update-admin-page-tabs-minimal-modifier
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

Admin page mixin: add `.jp-admin-page-tabs--minimal` modifier for hosts that render `<Tabs.List variant="minimal">`, and re-apply the tab font-size design token from an unlayered selector to defeat wp-admin's `button { font-size: inherit }` reset.
4 changes: 4 additions & 0 deletions projects/packages/podcast/changelog/update-podcast-tabs-padding-and-font-size
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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.
2 changes: 1 addition & 1 deletion projects/packages/podcast/src/dashboard/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ const App = () => {
return (
<AdminPage title={ PAGE_TITLE } subTitle={ PAGE_SUBTITLE }>
<Tabs.Root value={ activeTab } onValueChange={ handleTabChange }>
<div className="jp-admin-page-tabs" ref={ tablistRef }>
<div className="jp-admin-page-tabs jp-admin-page-tabs--minimal" ref={ tablistRef }>
<Tabs.List variant="minimal">
<Tabs.Tab value="stats" disabled={ ! isSetUp }>
{ __( 'Stats', 'jetpack-podcast' ) }
Expand Down
Loading