Overlapping icons on Github menu link

[LeoMcA]

External link icon in ::after overlaps the github icon in ::before - I imagine this is a small regression from the great "external icons shouldn't wrap independently" work.

[globau]

@pepelsbey Are you interested in having a look a this issue?

[ianjmacintosh]

I bumped into this today and can share more context.

1. Navigate to a page with the navigation menu (https://developer.mozilla.org/en-US/blog/) for example.
2. Open the "About" tab of the menu
3. Observe "MDN on GitHub" has the "external link" illustration drawn over it

I experimented with fixing in my dev tools:

.menu__panel-icon.external::after {
    position: static;
    transform: translateY(calc(.5lh - .75em));
}

---

Similar problem in the "blog post author" area (both in the preview when listing multiple article previews and within the blog post itself), when the author information includes an external link.

1. Navigate to a page with blog post author information, where the author info includes an external link (https://developer.mozilla.org/en-US/blog/global-privacy-control/)
2. Observe the "external link" illustration drawn over the author avatar

I experimented with fixing in my dev tools:

.blog-post-author:after {
  position: static;
  transform: translateY(calc(.5lh - .75em));
}

---

Clearly there's some "magic number" business in those fixes, but maybe it could be a starting point for a real fix.

Considering both of these two fixes are basically the same thing, it has me wondering if a simpler but broader/riskier fix would be:

.footer__links a {
  color: inherit;
  display: flex;  /* New property */
}

.external:after {
    background-color: currentcolor;
    content: "\200b" " (external)";
    content: "\200b" / " (external)";
    height: 1em;
    margin-left: .125em;
    mask-image: url(/static/client/external-link.4f3a2dc8e402cae5.svg);
    mask-size: cover;
    /* Remove these two lines:
    position: absolute;
    transform: translateY(calc(.5lh - .5em));
    */
    width: 1em;
    /* align-self on this pup */
    align-self: center;
}