Backup: removed backup-in-progress animation on small viewports (#21624)

* Backup: hide backup in progress animation on small screens

* Add missing change file

projects/plugins/backup/changelog/fix-remove-backup-animation-mobile

@@ -0,0 +1,4 @@
+Significance: patch
+Type: fixed
+
+Backup: removed backup-in-progress animation on small viewports

projects/plugins/backup/src/js/components/Backups.js

@@ -115,7 +115,7 @@ const Backups = () => {
 	const renderInProgressBackup = () => {
 		return (
 			<div class="jp-row">
-				<div class="lg-col-span-5 md-col-span-4 sm-col-span-4">
+				<div class="lg-col-span-5 md-col-span-8 sm-col-span-4">
 					<div class="backup__progress">
 						<div class="backup__progress-info">
 							<p>{ __( 'Backing up Your Groovy Site…', 'jetpack-backup' ) }</p>

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

@@ -1,8 +1,9 @@
 @import 'rna-styles';
+@import 'masthead/calypso-mixins';
 
 .backup__card {
 	padding: 24px;
-	background:var( --jp-white );
+	background: var( --jp-white );
 	box-shadow: 0px 0px 40px rgba( 0, 0, 0, 0.08 );
 	border-radius: var( --jp-border-radius );
 }
@@ -56,7 +57,8 @@
 	align-items: center;
 	margin-bottom: 8px;
 
-	svg, img {
+	svg,
+	img {
 		min-width: 32px;
 		min-height: 32px;
 	}
@@ -74,6 +76,10 @@
 
 .backup__animation {
 	position: relative;
+
+	@include responsive( full-width ) {
+		display: none;
+	}
 }
 
 .backup__animation-el-1,
@@ -123,7 +129,7 @@
 	}
 	100% {
 		opacity: 0;
-		transform: translateY( -96px );	
+		transform: translateY( -96px );
 	}
 }
 
@@ -146,7 +152,7 @@
 	}
 	100% {
 		opacity: 0;
-		transform: translateY( -96px );	
+		transform: translateY( -96px );
 	}
 }
 
@@ -169,6 +175,6 @@
 	}
 	100% {
 		opacity: 0;
-		transform: translateY( -84px );	
+		transform: translateY( -84px );
 	}
-}
+}