From f7a1cb62fd76db0f2394228f41ae70bf0511a99d Mon Sep 17 00:00:00 2001
From: Ike Saunders <ikesau@protonmail.com>
Date: Thu, 15 Feb 2024 20:04:17 +0000
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20update=20mobile=20styles=20for=20ke?=
 =?UTF-8?q?y-indicator-collection?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/@ourworldindata/utils/src/Util.ts     | 18 +++++++++---------
 site/gdocs/components/KeyIndicator.scss        | 10 ++++++++++
 site/gdocs/components/KeyIndicator.tsx         |  2 +-
 .../components/KeyIndicatorCollection.scss     |  5 ++++-
 .../components/KeyIndicatorCollection.tsx      |  2 +-
 5 files changed, 25 insertions(+), 12 deletions(-)

diff --git a/packages/@ourworldindata/utils/src/Util.ts b/packages/@ourworldindata/utils/src/Util.ts
index aab01f30349..aa7adf012b8 100644
--- a/packages/@ourworldindata/utils/src/Util.ts
+++ b/packages/@ourworldindata/utils/src/Util.ts
@@ -1624,15 +1624,6 @@ export function traverseEnrichedBlocks(
                 traverseEnrichedBlocks(node, callback, spanCallback)
             })
         })
-        .with(
-            { type: "key-indicator-collection" },
-            (keyIndicatorCollection) => {
-                callback(keyIndicatorCollection)
-                keyIndicatorCollection.blocks.forEach((node) =>
-                    traverseEnrichedBlocks(node, callback, spanCallback)
-                )
-            }
-        )
         .with(
             {
                 type: "key-indicator",
@@ -1644,6 +1635,15 @@ export function traverseEnrichedBlocks(
                 })
             }
         )
+        .with(
+            { type: "key-indicator-collection" },
+            (keyIndicatorCollection) => {
+                callback(keyIndicatorCollection)
+                keyIndicatorCollection.blocks.forEach((node) =>
+                    traverseEnrichedBlocks(node, callback, spanCallback)
+                )
+            }
+        )
         .with(
             {
                 type: P.union(
diff --git a/site/gdocs/components/KeyIndicator.scss b/site/gdocs/components/KeyIndicator.scss
index 0f0c40201a7..cfd4c66f465 100644
--- a/site/gdocs/components/KeyIndicator.scss
+++ b/site/gdocs/components/KeyIndicator.scss
@@ -14,6 +14,9 @@
 
     .indicator-metadata {
         margin-bottom: 16px;
+        @include sm-only {
+            display: none;
+        }
     }
 
     .indicator-title {
@@ -119,4 +122,11 @@
             display: none;
         }
     }
+
+    .key-indicator-chart {
+        @include sm-only {
+            order: -1;
+            margin-bottom: 16px;
+        }
+    }
 }
diff --git a/site/gdocs/components/KeyIndicator.tsx b/site/gdocs/components/KeyIndicator.tsx
index 881c750a26e..deea95bc005 100644
--- a/site/gdocs/components/KeyIndicator.tsx
+++ b/site/gdocs/components/KeyIndicator.tsx
@@ -54,7 +54,7 @@ export default function KeyIndicator({
                 </a>
             </div>
             <Chart
-                className="col-start-5 span-cols-8 span-sm-cols-12 margin-0"
+                className="key-indicator-chart col-start-5 span-cols-8 span-sm-cols-12 margin-0"
                 d={{
                     url: linkedChart.resolvedUrl,
                     type: "chart",
diff --git a/site/gdocs/components/KeyIndicatorCollection.scss b/site/gdocs/components/KeyIndicatorCollection.scss
index 595e6e74f7a..1e1b4dd6b95 100644
--- a/site/gdocs/components/KeyIndicatorCollection.scss
+++ b/site/gdocs/components/KeyIndicatorCollection.scss
@@ -10,8 +10,11 @@
         border-top: 1px solid var(--border);
     }
 
-    .accordion-item h3 {
+    .accordion-item .accordion-item__heading {
         margin: 0;
+        @include sm-only {
+            display: none;
+        }
     }
 
     .accordion-item__button,
diff --git a/site/gdocs/components/KeyIndicatorCollection.tsx b/site/gdocs/components/KeyIndicatorCollection.tsx
index 47202ddc614..94b94826d81 100644
--- a/site/gdocs/components/KeyIndicatorCollection.tsx
+++ b/site/gdocs/components/KeyIndicatorCollection.tsx
@@ -125,7 +125,7 @@ function AccordionItem({
             })}
         >
             {/* desktop */}
-            <h3>
+            <h3 className="accordion-item__heading">
                 <button
                     id={headerId}
                     className="accordion-item__button"