From 6c143bc8ca569b08c1c8cfc0f44f22dd3add726f Mon Sep 17 00:00:00 2001
From: sophiamersmann <sophia.mersmann1@gmail.com>
Date: Fri, 29 Dec 2023 12:53:34 +0000
Subject: [PATCH] :lipstick: (sources) make data citation smaller on smaller
 screens

---
 .../components/src/DataCitation/DataCitation.tsx       |  1 -
 .../grapher/src/modal/SourcesModal.scss                | 10 ++++------
 site/DataPageContent.scss                              |  1 +
 3 files changed, 5 insertions(+), 7 deletions(-)

diff --git a/packages/@ourworldindata/components/src/DataCitation/DataCitation.tsx b/packages/@ourworldindata/components/src/DataCitation/DataCitation.tsx
index db1009fb12c..656100177d5 100644
--- a/packages/@ourworldindata/components/src/DataCitation/DataCitation.tsx
+++ b/packages/@ourworldindata/components/src/DataCitation/DataCitation.tsx
@@ -11,7 +11,6 @@ export const DataCitation = (props: {
                 <>
                     <p className="citation__paragraph">
                         <span className="citation__type">In-line citation</span>
-                        <br />
                         If you have limited space (e.g. in data visualizations),
                         you can use this abbreviated in-line citation:
                     </p>
diff --git a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
index cece9597102..4faf607f4c2 100644
--- a/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
+++ b/packages/@ourworldindata/grapher/src/modal/SourcesModal.scss
@@ -131,6 +131,7 @@
 
         .citation__type {
             color: $dark-text;
+            font-weight: 500;
         }
 
         .indicator-processing .indicator-processing__link {
@@ -147,11 +148,6 @@
             &:hover {
                 text-decoration: none;
             }
-
-            svg {
-                //display: inline-block;
-                //transform: rotate(-90deg);
-            }
         }
     }
 }
@@ -188,7 +184,9 @@
         }
 
         .indicator-descriptions .key-info__learn-more,
-        .indicator-processing .indicator-processing__link {
+        .indicator-processing .indicator-processing__link,
+        .citation__paragraph,
+        .citation__type {
             font-size: var(--text-small);
         }
     }
diff --git a/site/DataPageContent.scss b/site/DataPageContent.scss
index 34551f56c57..bf27ebf8487 100644
--- a/site/DataPageContent.scss
+++ b/site/DataPageContent.scss
@@ -498,6 +498,7 @@
     }
 
     .citation__type {
+        display: block;
         color: $blue-90;
     }