Ticket #28983: 1082.2.diff

src/wp-includes/css/admin-bar.css

@@ -719 +719 @@
         box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 }
 
+@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;
+        }
+        #wpadminbar .quicklinks > ul > li {
+                float: none !important;
+        }
+        #wpadminbar .quicklinks > ul > li,
+        #wpadminbar .quicklinks .ab-item {
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                min-width: 0 !important;
+        }
+        #wpadminbar .quicklinks .ab-item {
+                overflow: hidden;
+        }
+        #wpadminbar .quicklinks .ab-item .ab-label,
+        #wpadminbar .quicklinks .ab-item .display-name {
+                float: none;
+                display: inline;
+        }
+        #wpadminbar .quicklinks,
+        #wpadminbar .quicklinks > ul {
+                display: -ms-flexbox;
+                display: flex;
+                flex-wrap: nowrap;
+                -ms-flex-wrap: nowrap;
+                min-width: 0 !important;
+        }
+        #wpadminbar #wp-admin-bar-top-secondary {
+                flex-direction: row-reverse;
+                -ms-flex-direction: row-reverse;
+        }
+}
+
 @media screen and (max-width: 782px) {
         /* Toolbar Touchification*/
         html #wpadminbar {
@@ -1016 +1052 @@
                 top: 10px;
                 left: 0;
         }
+        /* Prevent wrapping of admin bar that has more items than admin bar area on mobile layout */
+        #wpcontent {
+                padding-top: 15px;
+        }
+        #wpadminbar {
+                display: flex;
+                flex-wrap: nowrap;
+                padding-bottom: 15px;
+                overflow-x: scroll;
+                overflow-y: hidden;
+        }
+        #wpadminbar > *,
+        #wpadminbar .ab-top-menu {
+                display: flex;
+                flex-wrap: nowrap;
+        }
+        #wpadminbar .ab-sub-wrapper {
+                display: none !important;
+        }
 }
 
 /* Smartphone */