Issue: Non-Clickable Area in Admin Profile Dropdown

[r0nak]

When hovering over the far-right section of the admin profile dropdown in WordPress, a portion of the area is not clickable. This issue affects user interaction, as clicking on certain parts of the dropdown does not register any action.

Steps to Reproduce:
Log in to the WordPress dashboard.
Hover over the top-right "Howdy, Admin" section to reveal the dropdown.
Move the cursor towards the far-right side of the dropdown.
Attempt to click within the red-marked area (as shown in the attached screenshot).

Expected Behavior:
The entire dropdown area should be clickable without any unresponsive sections.

Actual Behavior:
A portion of the dropdown on the far-right is unclickable, causing usability issues.

Additional Notes:
This issue might be due to improper CSS handling, possibly an unintended margin or padding.
A potential fix could involve checking the CSS rules for .ab-sub-wrapper or inspecting any overflow properties affecting the dropdown.

[mukesh27]

Nice catch @r0nak

I also reproduce that issue in WP admin. It needs to CSS adjustment to fix the issue mark as good-first-bug so new contributor can work on it.

Move it to 6.8 for visibility.

Additional props to @pooja-n @jbanas @rinkalpagdar

[audrasjb]

I'm not sure I understand the issue :)
The left margin (on the left of the gravatar) is also not clickable, and both sounds relevant to me.
Pinging @karmatosed for a second opinion.

Fixes #62991

Removes the right margin from the admin profile dropdown to make area clickable.

[sabernhardt]

if the right margin is removed, a long display name would still have some padding on the link (shown with avatar, on large screen)

[sabernhardt]

without the avatar, a long display name is so wide in the top level that the list item has plenty of space on the right even without the right margin

[sabernhardt]

on smaller screens, with avatars enabled, the link hides the avatar and has 16px padding on left and right without any margin

[sabernhardt]

when avatars are not enabled, removing the right margin would leave the left margin on smaller screens, plus 16px padding on both sides

[sabernhardt]

The list item margins were added in r18776 and r19276. Then r26134 set the margins to 0 on smaller screens when the avatar is enabled.

If this removes the right margin, the profile link still would not be clickable for the full width, but I think an unclickable area on the left is fine. I tested with a very long display name, and I am not concerned about how it can look a little imbalanced in that situation. The link has padding of 10 pixels (or 16 on smaller screens), so the text should not touch the edge. Besides, keeping the display name shorter would help to avoid crowding the top-level links.

---

Note: I would not recommend trying to make the link cover the full width (in Core). Screenshot_28 shows that the Log Out link can appear slightly above the bottom of the avatar image when the display name matches the username. Even the space immediately below the text is unclickable in that case.

[audrasjb]

As per today's bug scrub: It appears this ticket still needs some work/discussion. As 6.8 beta 1 is very close, I'm moving it to 6.9. Feel free to move it back to 6.8 if it can be committed by Monday.

[devsahadat]

Thank you for the detailed bug report and proposed solution. After testing the suggested fix, I can confirm that removing the right margin from the admin profile dropdown effectively resolves the issue of the unclickable area on the far-right side. The solution works as expected in making the entire dropdown clickable without any dead zones.

However, I would like to highlight a few considerations for refinement:

• Long Display Names: When the display name is long, removing the right margin might create a visually imbalanced dropdown, especially on larger screens. Although this does not affect functionality, it could impact the aesthetics. I suggest considering a balanced approach, such as adjusting the padding or margin values rather than completely removing the right margin.
• Responsiveness: On smaller screens, especially with avatars enabled, the fix could result in the profile link appearing too close to the edge. The existing padding (16px) could be sufficient to ensure a balanced layout without relying on margins. I recommend testing this solution across different screen sizes to ensure consistency in the user interface.

[ashikur698]

To be more specific, if you remove the right margin from the "li role="group" " in the "wp-admin-bar-user-actions". Then it seems like it fixes it.

Here's a demo of that - ​https://monosnap.com/file/x6KJTkdTFbgTQoIWwEPcolaWijENtp

[logicrays]

Edited by @audrasjb.
AI comment, removed.
Note: The user was previously banned from logging in into .org due to spam issues.

[adamsilverstein]

If this removes the right margin, the profile link still would not be clickable for the full width, but I think an unclickable area on the left is fine. I tested with a very long display name, and I am not concerned about how it can look a little imbalanced in that situation. The link has padding of 10 pixels (or 16 on smaller screens), so the text should not touch the edge. Besides, keeping the display name shorter would help to avoid crowding the top-level links.

Thanks for detailed review @sabernhardt. The proposed patch does just that - removing the right margin is the only change. Based on that and your review, do you feel this is a reasonable change to make?

[sabernhardt]

I was trying to say that I agree with the patch :)

I think a review from someone on the Design team would be good, but I support the change.

[adamsilverstein]

I was trying to say that I agree with the patch :)

Thanks for clarifying @sabernhardt!

I will leave this in the 6.9 milestone pending design review.