From 27ad7624d05d8e5b13ba5f92d041e08c22c9b9b0 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Sat, 24 Apr 2021 12:04:37 +0300
Subject: [PATCH] fix(docs-infra): fix external link icons positioning (#41794)

While trying to fix the appearance of `<code>` elements inside of
anchors with external URLs in #41694, the positioning of external link
icons was broken for anchors that would span multiple lines (see #41774
for details).

This commit fixes the positioning of external link icons, while still
preserving the correct appearance of `<code>` elements inside anchors
with external URLs.

NOTE:
Different types of links with external URLs can be seen in the following
docs sections:
- http://localhost:4200/docs#assumptions
- http://localhost:4200/guide/http#security-xsrf-protection
- http://localhost:4200/guide/workspace-config#generation-schematics

Fixes #41774

PR Close #41794
---
 aio/src/styles/0-base/_typography.scss |  1 +
 aio/src/styles/2-modules/_code.scss    | 16 +++++++++++-----
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/aio/src/styles/0-base/_typography.scss b/aio/src/styles/0-base/_typography.scss
index 8a2751fff1..e0d83a57a3 100755
--- a/aio/src/styles/0-base/_typography.scss
+++ b/aio/src/styles/0-base/_typography.scss
@@ -210,6 +210,7 @@ code {
       > a {
         &[href^="http:"],
         &[href^="https:"] {
+          display: inline-flex;
           padding-right: calc(1em + 0.25rem);
           position: relative;
 
diff --git a/aio/src/styles/2-modules/_code.scss b/aio/src/styles/2-modules/_code.scss
index f9d588f5dc..577b2ccd85 100644
--- a/aio/src/styles/2-modules/_code.scss
+++ b/aio/src/styles/2-modules/_code.scss
@@ -169,11 +169,17 @@ aio-code {
     }
   }
 
-  :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) > code {
-    background-color: rgba($lightgray, 0.5);
-    border-radius: 4px;
-    color: $deepgray;
-    padding: 4px;
+  :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6):not(pre) {
+    > code {
+      background-color: rgba($lightgray, 0.5);
+      border-radius: 4px;
+      color: $deepgray;
+      padding: 0 4px;
+    }
+
+    &:not(a) > code {
+      padding: 4px;
+    }
   }
 
   .page-guide-cheatsheet & {