From f9c250a6503a64b7f7b5684d768f4cfc762f2d3f Mon Sep 17 00:00:00 2001 From: Kurt Zenisek Date: Mon, 8 Mar 2021 19:15:43 -0600 Subject: [PATCH 1/3] Prevent Admin Bar Items From Wrapping if There's More Items Than the Available Adminbar Width Code from version 1.0.3 of https://wordpress.org/plugins/admin-bar-wrap-fix/ per that plugin ideally not being necessary to prevent issues that this resolves (with WordPress just preventing it from the start.) --- src/wp-includes/css/admin-bar.css | 49 +++++++++++++++++++++++++++++++ 1 file changed, 49 insertions(+) diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index 3cc47cb0fcea4..85c461993898c 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -138,6 +138,11 @@ html:lang(he-il) .rtl #wpadminbar * { padding: 0 8px 0 7px; } +#wpadminbar .quicklinks > ul > li, +#wpadminbar .quicklinks .ab-item { + max-width: 100px; /* Improve spacing and prevent Site Title from eating WP Logo */ +} + #wpadminbar .menupop .ab-sub-wrapper, #wpadminbar .shortlink-input { margin: 0; @@ -719,6 +724,50 @@ html:lang(he-il) .rtl #wpadminbar * { box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); } +@media only screen and (min-width: 1061px) { + /* Reset the spacing */ + #wpadminbar .quicklinks > ul > li, + #wpadminbar .quicklinks .ab-item { + max-width: initial; + text-overflow: clip; + } +} +@media screen and (min-width: 782px) { + /* Prevent wrapping of admin bar that has more items than admin bar area (mobile-friendly toolbar doesn't need this) */ + #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 { From 0fa39b689ab1e03892fe9166273e2993bf2b8c4e Mon Sep 17 00:00:00 2001 From: Kurt Zenisek Date: Thu, 25 Mar 2021 13:28:41 -0500 Subject: [PATCH 2/3] Removed styles that were more problematic than helpful after more thorough testing. --- src/wp-includes/css/admin-bar.css | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index 85c461993898c..5295c59644b97 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -138,11 +138,6 @@ html:lang(he-il) .rtl #wpadminbar * { padding: 0 8px 0 7px; } -#wpadminbar .quicklinks > ul > li, -#wpadminbar .quicklinks .ab-item { - max-width: 100px; /* Improve spacing and prevent Site Title from eating WP Logo */ -} - #wpadminbar .menupop .ab-sub-wrapper, #wpadminbar .shortlink-input { margin: 0; @@ -724,14 +719,6 @@ html:lang(he-il) .rtl #wpadminbar * { box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); } -@media only screen and (min-width: 1061px) { - /* Reset the spacing */ - #wpadminbar .quicklinks > ul > li, - #wpadminbar .quicklinks .ab-item { - max-width: initial; - text-overflow: clip; - } -} @media screen and (min-width: 782px) { /* Prevent wrapping of admin bar that has more items than admin bar area (mobile-friendly toolbar doesn't need this) */ #wpadminbar .quicklinks { From d1f37753a1ee0b3ba546eb22669388efd47dba0f Mon Sep 17 00:00:00 2001 From: Kurt Zenisek Date: Mon, 31 May 2021 22:39:20 -0500 Subject: [PATCH 3/3] Mobile admin bar is now accounted for Mobile admin bar is now accounted for as plugins have recently been adding their own items to the mobile menu as well & potentially causing items wrap onto a new line outside of the admin bar given the available space. Instead of wrapping to overlap the actual content, it simply offers a horizontal scroll for when there are too many items to show on screen at once (keeping the items all within the admin bar's one row of icons.) --- src/wp-includes/css/admin-bar.css | 21 ++++++++++++++++++++- 1 file changed, 20 insertions(+), 1 deletion(-) diff --git a/src/wp-includes/css/admin-bar.css b/src/wp-includes/css/admin-bar.css index 5295c59644b97..1fd04eace2ad4 100644 --- a/src/wp-includes/css/admin-bar.css +++ b/src/wp-includes/css/admin-bar.css @@ -720,7 +720,7 @@ html:lang(he-il) .rtl #wpadminbar * { } @media screen and (min-width: 782px) { - /* Prevent wrapping of admin bar that has more items than admin bar area (mobile-friendly toolbar doesn't need this) */ + /* Prevent wrapping of admin bar that has more items than admin bar area on desktop/tablet layout */ #wpadminbar .quicklinks { justify-content: space-between; } @@ -1052,6 +1052,25 @@ html:lang(he-il) .rtl #wpadminbar * { 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 */