diff --git a/projects/js-packages/components/changelog/stick-admin-page-footer b/projects/js-packages/components/changelog/stick-admin-page-footer new file mode 100644 index 000000000000..0b84757961f4 --- /dev/null +++ b/projects/js-packages/components/changelog/stick-admin-page-footer @@ -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. diff --git a/projects/js-packages/components/components/admin-page/style.module.scss b/projects/js-packages/components/components/admin-page/style.module.scss index e94eb9d9b81d..5b37d535c386 100644 --- a/projects/js-packages/components/components/admin-page/style.module.scss +++ b/projects/js-packages/components/components/admin-page/style.module.scss @@ -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)); @media (max-width: 782px) { margin-left: -10px; // to neutralize the padding of #wpcontent. @@ -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) { + 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: