From 6100a7bec14c91c4cd2e629e1cfcd3a2d610acd1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Martin=20Ra=C4=8D=C3=A1k?= <martin.racak@ourworldindata.org>
Date: Fri, 13 Dec 2024 16:39:41 +0100
Subject: [PATCH] Fix alignment of deep link icon

Setting manual margins is fragile. Remove them to fix bad alignment in
about pages, since the icon is vertically aligned already.

It looks good to me as is, but if we want to change the alignment, we
should change the SVG instead.
---
 site/gdocs/components/AllCharts.tsx           |  2 +-
 site/gdocs/components/KeyInsights.tsx         |  2 +-
 site/gdocs/components/ResearchAndWriting.scss |  4 --
 site/gdocs/components/ResearchAndWriting.tsx  |  2 +-
 site/gdocs/components/centered-article.scss   | 24 ---------
 site/gdocs/components/topic-page.scss         | 21 ++------
 site/owid.scss                                | 52 ++++++++++++++-----
 7 files changed, 45 insertions(+), 62 deletions(-)

diff --git a/site/gdocs/components/AllCharts.tsx b/site/gdocs/components/AllCharts.tsx
index 60ae1250c13..6e04a7b217e 100644
--- a/site/gdocs/components/AllCharts.tsx
+++ b/site/gdocs/components/AllCharts.tsx
@@ -52,7 +52,7 @@ export function AllCharts(props: AllChartsProps) {
                 className="article-block__heading h1-semibold"
                 id={ALL_CHARTS_ID}
             >
-                {heading}
+                <span>{heading}</span>
                 <a
                     className="deep-link"
                     aria-labelledby={ALL_CHARTS_ID}
diff --git a/site/gdocs/components/KeyInsights.tsx b/site/gdocs/components/KeyInsights.tsx
index 3348e6866d5..00362816e2d 100644
--- a/site/gdocs/components/KeyInsights.tsx
+++ b/site/gdocs/components/KeyInsights.tsx
@@ -321,7 +321,7 @@ export const KeyInsights = ({
                 className="article-block__heading h1-semibold"
                 id={KEY_INSIGHTS_ID}
             >
-                {heading}
+                <span>{heading}</span>
                 <a
                     className="deep-link"
                     aria-labelledby={KEY_INSIGHTS_ID}
diff --git a/site/gdocs/components/ResearchAndWriting.scss b/site/gdocs/components/ResearchAndWriting.scss
index 3b67a5b61fb..92816baba92 100644
--- a/site/gdocs/components/ResearchAndWriting.scss
+++ b/site/gdocs/components/ResearchAndWriting.scss
@@ -15,10 +15,6 @@ $rw-margin-bottom-grid-cell: 4px;
     @include sm-up {
         margin: 32px 0 24px;
     }
-
-    a.deep-link {
-        margin-top: 11px;
-    }
 }
 
 .research-and-writing-row__heading {
diff --git a/site/gdocs/components/ResearchAndWriting.tsx b/site/gdocs/components/ResearchAndWriting.tsx
index 5a205409617..806f273e806 100644
--- a/site/gdocs/components/ResearchAndWriting.tsx
+++ b/site/gdocs/components/ResearchAndWriting.tsx
@@ -201,7 +201,7 @@ export function ResearchAndWriting(props: ResearchAndWritingProps) {
                 className="article-block__heading span-cols-12 h1-semibold"
                 id={slug}
             >
-                {heading || RESEARCH_AND_WRITING_DEFAULT_HEADING}
+                <span>{heading || RESEARCH_AND_WRITING_DEFAULT_HEADING}</span>
                 <a
                     className="deep-link"
                     aria-labelledby={slug}
diff --git a/site/gdocs/components/centered-article.scss b/site/gdocs/components/centered-article.scss
index abcb1ce0f5c..ccce63cc548 100644
--- a/site/gdocs/components/centered-article.scss
+++ b/site/gdocs/components/centered-article.scss
@@ -288,46 +288,22 @@ $banner-height: 200px;
     }
 }
 
-.article-block__heading {
-    a.deep-link {
-        position: absolute;
-    }
-
-    &:hover {
-        a.deep-link {
-            opacity: 1;
-        }
-    }
-}
-
 h1.article-block__heading {
     a.deep-link {
-        margin-top: 16px;
         height: 16px;
         width: 16px;
-        @include sm-only {
-            margin-top: 10px;
-        }
     }
 }
 h2.article-block__heading {
     a.deep-link {
-        margin-top: 11px;
         height: 14px;
         width: 14px;
-        @include sm-only {
-            margin-top: 10px;
-        }
     }
 }
 h3.article-block__heading {
     a.deep-link {
-        margin-top: 8px;
         height: 12px;
         width: 12px;
-        @include sm-only {
-            margin-top: 10px;
-        }
     }
 }
 
diff --git a/site/gdocs/components/topic-page.scss b/site/gdocs/components/topic-page.scss
index cf40470a9f6..6e8dc9f65d3 100644
--- a/site/gdocs/components/topic-page.scss
+++ b/site/gdocs/components/topic-page.scss
@@ -203,38 +203,23 @@
     }
     h1.article-block__heading.h1-semibold {
         font-size: 2.25rem;
-        a.deep-link {
-            margin-top: 19px;
-        }
+
         @include sm-up {
             font-size: 2.625rem;
-            a.deep-link {
-                margin-top: 23px;
-            }
         }
     }
     h2.article-block__heading.h2-bold {
         font-size: 1.5rem;
-        a.deep-link {
-            margin-top: 13px;
-        }
+
         @include sm-up {
             font-size: 2rem;
-            a.deep-link {
-                margin-top: 19px;
-            }
         }
     }
     h3.article-block__heading.h3-bold {
         font-size: 1.25rem;
-        a.deep-link {
-            margin-top: 10px;
-        }
+
         @include sm-up {
             font-size: 1.5rem;
-            a.deep-link {
-                margin-top: 12px;
-            }
         }
     }
 }
diff --git a/site/owid.scss b/site/owid.scss
index 1b324005c6a..64244cf4214 100644
--- a/site/owid.scss
+++ b/site/owid.scss
@@ -210,7 +210,6 @@ main {
     display: inline-block;
     width: 28px;
     height: 20px;
-    margin-left: 0.5rem;
     font-size: 16px;
     background: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTgiIGhlaWdodD0iMTgiIHZpZXdCb3g9IjAgMCAxOCAxOCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cGF0aCBkPSJNMTEuNDgyIDYuNTE3MThDMTMuNTgyNSA4LjYxOTg0IDEzLjU1MzYgMTEuOTkwOSAxMS40OTQ2IDE0LjA2MTRDMTEuNDkwOCAxNC4wNjU2IDExLjQ4NjIgMTQuMDcwMiAxMS40ODIgMTQuMDc0NEw5LjExOTQ4IDE2LjQzNjlDNy4wMzU3NyAxOC41MjA2IDMuNjQ1NjkgMTguNTIwMyAxLjU2MjMgMTYuNDM2OUMtMC41MjE0MTYgMTQuMzUzNSAtMC41MjE0MTYgMTAuOTYzIDEuNTYyMyA4Ljg3OTY4TDIuODY2OCA3LjU3NTE4QzMuMjEyNzQgNy4yMjkyNCAzLjgwODUgNy40NTkxNiAzLjgyNjM2IDcuOTQ4MDRDMy44NDkxNCA4LjU3MTA4IDMuOTYwODcgOS4xOTcwNCA0LjE2NzAyIDkuODAxNTJDNC4yMzY4NCAxMC4wMDYyIDQuMTg2OTYgMTAuMjMyNiA0LjAzNDAzIDEwLjM4NTVMMy41NzM5NCAxMC44NDU2QzIuNTg4NjUgMTEuODMwOSAyLjU1Nzc0IDEzLjQzNTIgMy41MzMzMyAxNC40MzAyQzQuNTE4NTUgMTUuNDM0OSA2LjEzNzkyIDE1LjQ0MDkgNy4xMzA2OSAxNC40NDgxTDkuNDkzMTkgMTIuMDg1OUMxMC40ODQzIDExLjA5NDggMTAuNDgwMSA5LjQ5MjkyIDkuNDkzMTkgOC41MDU5N0M5LjM2MzA4IDguMzc2MTEgOS4yMzIwMiA4LjI3NTIxIDkuMTI5NjQgOC4yMDQ3MkM5LjA1NzIyIDguMTU0OTkgOC45OTc0MiA4LjA4OTAxIDguOTU1MDIgOC4wMTIwN0M4LjkxMjYxIDcuOTM1MTIgOC44ODg3OCA3Ljg0OTMzIDguODg1NDEgNy43NjE1NEM4Ljg3MTQ5IDcuMzkwMDQgOS4wMDMxMiA3LjAwNzIzIDkuMjk2NjcgNi43MTM2N0wxMC4wMzY5IDUuOTczNDZDMTAuMjMwOSA1Ljc3OTM2IDEwLjUzNTQgNS43NTU1MiAxMC43NjA1IDUuOTEyNkMxMS4wMTgzIDYuMDkyNTggMTEuMjU5NyA2LjI5NDg5IDExLjQ4MiA2LjUxNzE4VjYuNTE3MThaTTE2LjQzNjcgMS41NjIxOUMxNC4zNTMzIC0wLjUyMTI0IDEwLjk2MzMgLTAuNTIxNTIyIDguODc5NTQgMS41NjIxOUw2LjUxNzA0IDMuOTI0NjlDNi41MTI4MiAzLjkyODkxIDYuNTA4MjUgMy45MzM0OCA2LjUwNDM5IDMuOTM3N0M0LjQ0NTQyIDYuMDA4MTIgNC40MTY1NiA5LjM3OTIyIDYuNTE3MDQgMTEuNDgxOUM2LjczOTMzIDExLjcwNDIgNi45ODA3NCAxMS45MDY1IDcuMjM4NDggMTIuMDg2NEM3LjQ2MzU1IDEyLjI0MzUgNy43NjgwOCAxMi4yMTk2IDcuOTYyMTQgMTIuMDI1Nkw4LjcwMjMyIDExLjI4NTRDOC45OTU4OCAxMC45OTE4IDkuMTI3NSAxMC42MDkgOS4xMTM1OCAxMC4yMzc1QzkuMTEwMjEgMTAuMTQ5NyA5LjA4NjM4IDEwLjA2MzkgOS4wNDM5OCA5Ljk4Njk2QzkuMDAxNTcgOS45MTAwMSA4Ljk0MTc3IDkuODQ0MDQgOC44NjkzNSA5Ljc5NDMxQzguNzY2OTcgOS43MjM4MiA4LjYzNTkxIDkuNjIyOTIgOC41MDU4IDkuNDkzMDZDNy41MTg4NiA4LjUwNjExIDcuNTE0NzEgNi45MDQxOCA4LjUwNTggNS45MTMwOUwxMC44NjgzIDMuNTUwOTRDMTEuODYxMSAyLjU1ODE3IDEzLjQ4MDQgMi41NjQxNCAxNC40NjU3IDMuNTY4ODdDMTUuNDQxMiA0LjU2MzggMTUuNDEwNCA2LjE2ODEyIDE0LjQyNTEgNy4xNTM0MUwxMy45NjUgNy42MTM1QzEzLjgxMiA3Ljc2NjQzIDEzLjc2MjEgNy45OTI4MyAxMy44MzIgOC4xOTc1MUMxNC4wMzgxIDguODAxOTkgMTQuMTQ5OSA5LjQyNzk1IDE0LjE3MjYgMTAuMDUxQzE0LjE5MDUgMTAuNTM5OSAxNC43ODYzIDEwLjc2OTggMTUuMTMyMiAxMC40MjM5TDE2LjQzNjcgOS4xMTkzNEMxOC41MjA0IDcuMDM2MDIgMTguNTIwNCAzLjY0NTU1IDE2LjQzNjcgMS41NjIxOVYxLjU2MjE5WiIgZmlsbD0iY3VycmVudENvbG9yIiBmaWxsLW9wYWNpdHk9IjAuMjUiLz48L3N2Zz4=")
         no-repeat left;
@@ -227,21 +226,48 @@ main {
     &:focus {
         opacity: 1;
     }
+}
 
-    @include touch-device {
-        // It's not visible because of the opacity anyway, but if it's the
-        // only reason the whole heading wraps to the next line, it adds
-        // vertical space, which shouldn't be there.
-        display: none;
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    // Avoid wrapping the deep-link to the next line as an orphan. Using &nbsp;
+    // doesn't work and programmatically wrapping the last word and the
+    // deep-link in a span with text-wrap: nowrap would be an even bigger hack.
+    &:has(.deep-link) {
+        > *:first-child {
+            padding-right: 2rem;
+
+            // On touch devices, the deep-link is hidden, so we don't need the
+            // padding to make space for it.
+            @include touch-device {
+                padding-right: 0;
+            }
+        }
+    }
+
+    .deep-link {
+        // Margin is a bit smaller than the padding on the preceding element to
+        // add a bit of space between them.
+        margin-left: -1.5rem;
+
+        @include touch-device {
+            // It's not visible because of the opacity anyway, but it can add
+            // enough vertical space to cause the heading to wrap to the next
+            // line. Hide it instead, so the heading can use as much space as
+            // possible.
+            display: none;
+        }
     }
-}
 
-h2:hover .deep-link,
-h3:hover .deep-link,
-h4:hover .deep-link,
-h5:hover .deep-link,
-h6:hover .deep-link {
-    opacity: 1;
+    &:hover {
+        .deep-link {
+            opacity: 1;
+        }
+    }
 }
 
 .heading-latest {