Backup: fix progress animation overlapping the page header (#47697)

* Backup: fix progress animation overlapping the page header

The backup in-progress animation uses absolutely positioned images with
translateY keyframes that move them upward. When the content column is
short, these elements escape the container bounds and visually overlap
the AdminPage header.

Fix by adding overflow: hidden to .backup__animation so images are
clipped to the container, and removing the unnecessary z-index: 4 that
caused them to paint above the header.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

* Backup: clip animation at section-hero boundary instead of grid cell

The previous overflow: hidden on .backup__animation clipped animation
elements inside the gray section, making them disappear into a visible
beige gap (wp-admin body background) between the content and header.

Move overflow: hidden up to AdminSectionHero (.section-hero) so
animation clips at the gray section edge — a clean visual boundary.
Also add z-index: 1 to the AdminPage header so it always paints above
page content.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

---------

Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/23436683021

Upstream-Ref: Automattic/jetpack@5d6f151

Author: vianasw

CHANGELOG.md

@@ -10,6 +10,7 @@ This is an alpha version! The changes listed here are not final.
 - Update package dependencies.
 
 ### Fixed
+- Add overflow hidden to AdminSectionHero and z-index to AdminPage header to prevent content from overlapping the page header.
 - Fix AdminPage footer Container causing horizontal scroll on narrow viewports by explicitly setting box-sizing: border-box.
 
 ## [1.6.0] - 2026-03-16

build/components/admin-page/style.module.scss

@@ -21,6 +21,7 @@
 	// JETPACK-1386
 	:global(.admin-ui-page__header) {
 		position: relative;
+		z-index: 1;
 	}
 
 	// Normalize admin headers: implementation of admin-ui needs to

build/components/admin-section/hero/style.module.scss

@@ -1,4 +1,5 @@
 .section-hero {
 	padding-top: 1px; // prevent margin collapse for interior sections
 	background: var(--jp-white-off);
+	overflow: hidden;
 }

components/admin-page/style.module.scss

@@ -21,6 +21,7 @@
 	// JETPACK-1386
 	:global(.admin-ui-page__header) {
 		position: relative;
+		z-index: 1;
 	}
 
 	// Normalize admin headers: implementation of admin-ui needs to

components/admin-section/hero/style.module.scss

@@ -1,4 +1,5 @@
 .section-hero {
 	padding-top: 1px; // prevent margin collapse for interior sections
 	background: var(--jp-white-off);
+	overflow: hidden;
 }