From 6ccae68203c83e0d29907b81909f7e3b87fb45a2 Mon Sep 17 00:00:00 2001
From: Ruchika Sinha <69535463+Ruchika4@users.noreply.github.com>
Date: Mon, 30 Sep 2024 02:10:14 -0700
Subject: [PATCH] [Release] Stage to Main 09/27 (#419)

[MWPW-159151] Rearrange content in mobile view for marquee used with interactive metadata #417
MWPW-159309 | Unit test fix #420
Creative cloud:

Before: https://main--cc--adobecom.hlx.live/?martech=off
After: https://stage--cc--adobecom.hlx.live/?martech=off
---
 .../interactive-metadata.css                  | 26 +++++++++++++++++++
 test/scripts/mocks/head.html                  |  2 ++
 test/scripts/scripts.test.js                  |  1 +
 3 files changed, 29 insertions(+)
 create mode 100644 test/scripts/mocks/head.html

diff --git a/creativecloud/blocks/interactive-metadata/interactive-metadata.css b/creativecloud/blocks/interactive-metadata/interactive-metadata.css
index 551b43d4a..1d892b469 100644
--- a/creativecloud/blocks/interactive-metadata/interactive-metadata.css
+++ b/creativecloud/blocks/interactive-metadata/interactive-metadata.css
@@ -265,6 +265,18 @@
 }
 
 @media screen and (max-width: 600px) {
+  .marquee.large.interactive-enabled.content-top-mobile .text .body-xl {
+    order: unset;
+  }
+
+  .marquee.large.interactive-enabled.content-top-mobile .text p.supplemental-text {
+    order: 3;
+  }
+
+  .marquee.large.interactive-enabled.content-top-mobile .text {
+    order: 1;
+  }
+
   .aside.interactive-enabled .foreground.container .image {
     display: block;
     width: 100%;
@@ -383,6 +395,20 @@
   }
 }
 
+@media screen and (min-width: 600px) and (max-width: 1199px) {
+  .marquee.large.interactive-enabled.content-top-tablet .text .body-xl {
+    order: unset;
+  }
+
+  .marquee.large.interactive-enabled.content-top-tablet .text p.supplemental-text {
+    order: 3;
+  }
+
+  .marquee.large.interactive-enabled.content-top-tablet .text {
+    order: 1;
+  }
+}
+
 @media screen and (max-width: 1200px) {
   .aside.interactive-enabled .foreground.container .image {
     order: 1;
diff --git a/test/scripts/mocks/head.html b/test/scripts/mocks/head.html
new file mode 100644
index 000000000..36fdafced
--- /dev/null
+++ b/test/scripts/mocks/head.html
@@ -0,0 +1,2 @@
+<meta name="viewport" content="width=device-width, initial-scale=1"/>
+<link rel="icon" href="data:,">
diff --git a/test/scripts/scripts.test.js b/test/scripts/scripts.test.js
index e8f6dad02..9dfebb964 100644
--- a/test/scripts/scripts.test.js
+++ b/test/scripts/scripts.test.js
@@ -6,6 +6,7 @@ function delay(ms) {
 }
 
 document.body.innerHTML = await readFile({ path: './mocks/body.html' });
+document.head.innerHTML = await readFile({ path: './mocks/head.html' });
 describe('Scripts', () => {
   before(async () => {
     await import('../../creativecloud/scripts/scripts.js');