Index: src/wp-admin/css/colors/_admin.scss
===================================================================
--- src/wp-admin/css/colors/_admin.scss	(revision 37863)
+++ src/wp-admin/css/colors/_admin.scss	(working copy)
@@ -287,7 +287,12 @@
 	color: $menu-highlight-icon;
 }

+#wpadminbar #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
+#wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
+	box-shadow: -8px 0 0 $menu-background, -8px 0 3px $menu-background; /* A little trick so that text doesn't appear to run under the avatar image */
+}

+
 /* Admin Bar: submenu */

 #wpadminbar .menupop .ab-sub-wrapper {
Index: src/wp-includes/css/admin-bar.css
===================================================================
--- src/wp-includes/css/admin-bar.css	(revision 37863)
+++ src/wp-includes/css/admin-bar.css	(working copy)
@@ -88,6 +88,8 @@
 	line-height: 32px;
 	height: 32px;
 	position: fixed;
+	display: block;
+	display: flex;
 	top: 0;
 	left: 0;
 	width: 100%;
@@ -96,6 +98,17 @@
 	background: #23282d;
 }

+#wpadminbar .quicklinks {
+	display: flex;
+	width: 100%;
+	justify-content: space-between;
+}
+
+#wpadminbar .ab-top-menu {
+	display: flex;
+	justify-content: flex-start;
+}
+
 #wpadminbar .ab-sub-wrapper,
 #wpadminbar ul,
 #wpadminbar ul li {
@@ -121,6 +134,10 @@
 	float: left;
 }

+#wpadminbar .ab-item {
+	overflow: hidden;
+}
+
 #wpadminbar .ab-empty-item {
 	outline: none;
 }
@@ -378,6 +395,8 @@

 #wpadminbar .ab-top-secondary {
 	float: right;
+	justify-content: flex-end;
+	flex-direction: row-reverse;
 }

 #wpadminbar ul li:last-child,
@@ -445,6 +464,7 @@
 #wpadminbar #wp-admin-bar-user-info a {
 	background: none;
 	height: auto;
+	overflow: visible;
 }

 #wpadminbar #wp-admin-bar-user-info span {
@@ -463,8 +483,17 @@
 	font-size: 11px;
 }

+#wpadminbar #wp-admin-bar-my-account.with-avatar > a {
+	/*display: flex;
+	align-items: center;
+	white-space: nowrap;
+	text-overflow: ellipsis;*/
+	position: relative;
+}
+
 #wpadminbar #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
 #wpadminbar #wp-admin-bar-my-account.with-avatar > a img {
+	position: absolute;
 	width: auto;
 	height: 16px;
 	padding: 0;
@@ -472,9 +501,12 @@
 	background: #eee;
 	line-height: 24px;
 	vertical-align: middle;
-	margin: -4px 0 0 6px;
+	margin-left: 6px;
 	float: none;
 	display: inline;
+	top: 7px;
+	right: 8px;
+	box-shadow: -8px 0 0 #23282d, -8px 0 3px #23282d; /* A little trick so that text doesn't appear to run under the avatar image */
 }

 #wpadminbar.ie8 #wp-admin-bar-my-account.with-avatar > .ab-empty-item img,
@@ -988,7 +1020,7 @@

 	#wpadminbar .quicklinks li#wp-admin-bar-my-account.with-avatar > a img {
 		position: absolute;
-		top: 13px;
+		top: 10px;
 		right: 10px;
 		width: 26px;
 		height: 26px;