admin-bar-wrap-fix.scss

@media screen and (min-width: 782px) {
	// Prevent wrapping of admin bar that has more items than admin bar area on desktop/tablet layout
	#wpadminbar {
		.quicklinks {
			justify-content: space-between;
			> ul > li {
				float: none !important;
			}
			> ul > li,
			.ab-item {
				white-space: nowrap;
				text-overflow: ellipsis;
				min-width: 0 !important;
			}
			.ab-item {
				overflow: hidden;
				.ab-label,
				.display-name {
					float: none;
					display: inline;
				}
			}
		}
		.quicklinks,
		.quicklinks > ul {
			display: -ms-flexbox;
			display: flex;
			flex-wrap: nowrap;
			-ms-flex-wrap: nowrap;
			min-width: 0 !important;
		}
		#wp-admin-bar-top-secondary {
			flex-direction: row-reverse;
			-ms-flex-direction: row-reverse;
		}
	}
}
@media screen and (max-width: 782px) {
	// Prevent wrapping of admin bar that has more items than admin bar area on mobile layout
	#wpcontent {
		padding-top: 15px; // Browser scrollbar dimension per https://codepen.io/sambible/post/browser-scrollbar-widths(with the overflow-y:hidden; handling the difference between them)
	}
	#wpadminbar {
		display: flex;
		flex-wrap: nowrap;
		padding-bottom: 15px; // Browser scrollbar dimension per https://codepen.io/sambible/post/browser-scrollbar-widths (with the overflow-y:hidden; handling the difference between them)
		overflow-x: scroll;
		overflow-y: hidden;
		> *,
		.ab-top-menu {
			display: flex;
			flex-wrap: nowrap;
		}
		.ab-sub-wrapper {
			display: none !important;
		}
	}
}