From e3e7044d06e679f4b1b9ba98e129b9a552be3542 Mon Sep 17 00:00:00 2001
From: George Kalpakas <kalpakas.g@gmail.com>
Date: Tue, 16 Jan 2018 13:20:09 +0200
Subject: [PATCH] fix(aio): prevent heading misplacement while styles load
 (#21695)

During the initial load of the page (probably until the icon styles are
loaded and/or applied), the `.header-link` element is wider, pushing the
heading text slightly to the right (for a brief moment).

This commit prevents this slight shift by explicitly setting the width
for the `.header-link` element.

PR Close #21695
---
 aio/src/styles/2-modules/_heading-anchors.scss | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/aio/src/styles/2-modules/_heading-anchors.scss b/aio/src/styles/2-modules/_heading-anchors.scss
index b1a310f933..a59e52d8b6 100644
--- a/aio/src/styles/2-modules/_heading-anchors.scss
+++ b/aio/src/styles/2-modules/_heading-anchors.scss
@@ -6,6 +6,7 @@
     }
 
     .header-link {
+      box-sizing: border-box;
       color: $mediumgray;
       display: inline-block;
       margin-left: -42px;
@@ -13,6 +14,7 @@
       text-decoration: none;
       vertical-align: middle;
       visibility: hidden;
+      width: 40px;
 
       @media (max-width: 600px) {
         float: right;