From 6027209e57571c88c86a1acd66bb916155b59b44 Mon Sep 17 00:00:00 2001
From: Kev <kevin.zoschke@automattic.com>
Date: Wed, 10 Nov 2021 15:26:19 -0500
Subject: [PATCH] Backup: removed backup-in-progress animation on small
 viewports (#21624)

* Backup: hide backup in progress animation on small screens

* Add missing change file
---
 .../fix-remove-backup-animation-mobile         |  4 ++++
 .../backup/src/js/components/Backups.js        |  2 +-
 .../src/js/components/backups-style.scss       | 18 ++++++++++++------
 3 files changed, 17 insertions(+), 7 deletions(-)
 create mode 100644 projects/plugins/backup/changelog/fix-remove-backup-animation-mobile

diff --git a/projects/plugins/backup/changelog/fix-remove-backup-animation-mobile b/projects/plugins/backup/changelog/fix-remove-backup-animation-mobile
new file mode 100644
index 0000000000000..c4359207cd540
--- /dev/null
+++ b/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
diff --git a/projects/plugins/backup/src/js/components/Backups.js b/projects/plugins/backup/src/js/components/Backups.js
index 92434f5baa096..90269e64ecc97 100644
--- a/projects/plugins/backup/src/js/components/Backups.js
+++ b/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>
diff --git a/projects/plugins/backup/src/js/components/backups-style.scss b/projects/plugins/backup/src/js/components/backups-style.scss
index 3581ddeb2e65d..ff956f4a7ca16 100644
--- a/projects/plugins/backup/src/js/components/backups-style.scss
+++ b/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 );
 	}
-}
\ No newline at end of file
+}