Skip to content

AdminPage: stick JetpackFooter to the bottom of the viewport #49201

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

Closed
angelablake wants to merge 1 commit into from
Closed

AdminPage: stick JetpackFooter to the bottom of the viewport #49201

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 4 additions & 0 deletions projects/js-packages/components/changelog/stick-admin-page-footer
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
Significance: patch
Type: changed

AdminPage: pin `JetpackFooter` to the bottom of the viewport when content is short, so every product using `AdminPage` gets a consistent sticky-footer layout.
22 changes: 22 additions & 0 deletions projects/js-packages/components/components/admin-page/style.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,12 @@
.admin-page {
margin-left: -20px; // to neutralize the padding of #wpcontent.
// Fill wp-admin's content area so the JetpackFooter can sit at the
// bottom of the viewport when content is short. The admin-ui `Page`
// (`.admin-ui-page`) becomes a flex column that flex-grows inside the
// root, and the footer claims any leftover space via `margin-top: auto`.
display: flex;
flex-direction: column;
min-height: calc(100vh - var(--wp-admin--admin-bar--height, 32px));
Copy link
Copy Markdown
Member

@simison simison May 28, 2026 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Likely works with variable, but noting that the default will be 48px when on mobile.


@media (max-width: 782px) {
margin-left: -10px; // to neutralize the padding of #wpcontent.
Expand All @@ -9,6 +16,21 @@
background-color: var(--jp-white);
}

// Normalize admin headers: implementation of admin-ui needs to
// comprehend old wp-admin floating containers, such as Hello Dolly
// (`clear: both`). Also make the Page a flex column that fills the
// wp-admin content area so `JetpackFooter` can stick to the bottom.
:global(.admin-ui-page) {
Copy link
Copy Markdown
Member

@simison simison May 28, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Using the internal CSS selector from admin-ui will break in future and cannot be used as a stable API.

clear: both;
flex: 1 1 auto;
display: flex;
flex-direction: column;
}

:global(.jetpack-footer) {
margin-top: auto;
}

// Remove the admin-ui header border when tabs are present,
// or when showBottomBorder is false.
// Ideally admin-ui would expose a prop or CSS custom property for this:
Expand Down
Loading