Fix nav jiggle by adding data-title attribute and css:after

Reorder content and display order in navbar.scss

frontend/css/navbar.scss

@@ -113,6 +113,14 @@ nav {
     div {
       display: inline;
       vertical-align: middle;
+      &:after{
+        content: attr(data-title);
+        display: block;
+        font-weight: bold;
+        height: 0;
+        overflow: hidden;
+        visibility: hidden;
+      }
     }
   }
 }
@@ -137,6 +145,14 @@ nav {
       margin-right: 0.8rem;
     }
   }
+  .nav-name:after{
+    content: attr(data-title);
+    display: block;
+    font-weight: bold;
+    height: 0;
+    overflow: hidden;
+    visibility: hidden;
+  }
 }
 
 .menu-popover {

frontend/nav/index.tsx

@@ -109,7 +109,7 @@ export class NavBar extends React.Component<NavBarProps, Partial<NavBarState>> {
                         position={Position.BOTTOM_RIGHT}
                         isOpen={accountMenuOpen}
                         onClose={this.close("accountMenuOpen")}>
-                        <div className="nav-name"
+                        <div className="nav-name" data-title={firstName}
                           onClick={this.toggle("accountMenuOpen")}>
                           {firstName}
                         </div>

frontend/nav/nav_links.tsx

@@ -62,7 +62,7 @@ export const NavLinks = (props: NavLinksProps) => {
           draggable={false}
           onClick={props.close("mobileMenuOpen")}>
           <i className={`fa fa-${link.icon}`} />
-          <div>
+          <div data-title={t(link.name)}>
             {t(link.name)}
             {link.slug === "messages" && props.alertCount > 0 &&
               <div className={"saucer fun"}>