WordPress Dashboard Collapse Menu Transition issue.

[shuvo52]

Hi
When I collapse the menu it's showing awkward.
See the video: ​https://d.pr/v/34K9H4
I think this issue should be fixed as soon as possible.
Regards

[sabernhardt]

Thanks for the report!

The icon dimensions have a discrepancy between the expanded and collapsed states. The expanded link's height increased by 0.2 pixels in [45186], and the width had a 1-pixel difference before then. This is more noticeable on the About pages than any page where you would find an open submenu on the side (because expanding a submenu is a bigger difference).

• When the menu is collapsed (or "folded"), the icon is in a 35px by 30px container within a 36px by 34px link.
• When the text shows, the icon's container is 36px by 34px, and the text size makes the link 160px by 34.2px (14px times 1.3 line-height plus 8px padding on the top and bottom).

[ironprogrammer]

During test triage, it was agreed to mark this ticket's priority to low, but keep it open for a patch. Why low? Triagers noted that the sub-pixel shift was barely noticeable. However, the assessment in comment:1 is a good basis for a patch.

[ironprogrammer]

Adding has-screenshots as reporter's video does show the shift.

[pattihis]

Fix admin menu transition jump by standardizing menu item heights

[pattihis]

Summary of patch added:

wp-admin/css/admin-menu.css

1. Lines 237-238: Added box-sizing: border-box; and height: 34px; to the #adminmenu a.menu-top, #adminmenu .wp-submenu-head selector to fix the 0.2px issue
2. Lines 322-323: Updated .folded #adminmenu div.wp-menu-image from width: 35px; height: 30px; to width: 36px; height: 34px; to maintain consistency

This patch addresses the core issue in ticket #58335 by:

• Standardizing menu item heights to exactly 34px in both collapsed and expanded states
• Eliminating the visual "jump" during menu transitions

[sabernhardt]

removes width and height rules instead of redefining the same values

[sabernhardt]

Related: #65266

1. ​PR 11860 edits the line-height to reduce the calculated height.
2. 58335.1.diff​ deletes the width and height rules for the .folded style. [26766] reduced the .folded width to 35px for long link text in #26452, but the text wraps to another line more smoothly now.

However, I think the ​34-pixel width is worth keeping, between the 782px and 960px CSS breakpoints. That seems to center the icon better horizontally within the narrow column and align it with the W logo in the toolbar.