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>

Author: vianasw

projects/js-packages/components/changelog/fix-backup-animation-overlaps-header

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Add overflow hidden to AdminSectionHero and z-index to AdminPage header to prevent content from overlapping the page header.

projects/js-packages/components/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

projects/js-packages/components/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;
 }

projects/packages/backup/changelog/fix-backup-progress-overlaps-header

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Fix progress animation overlapping the page header by clipping animation overflow.

projects/packages/backup/src/js/components/backups-style.scss

@@ -160,7 +160,6 @@
 .backup__animation-el-3 {
 	opacity: 0;
 	position: absolute;
-	z-index: 4;
 	animation: animation-el-3 4s ease-in-out 0.8s infinite normal forwards;
 }