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

@@ -210,6 +210,7 @@ code {
       > a {
         &[href^="http:"],
         &[href^="https:"] {
+          display: inline-flex;
           padding-right: calc(1em + 0.25rem);
           position: relative;
 

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 & {