Long display name breaks admin bar layout on frontend and backend at smaller screen sizes

[dvpatel]

When a user has a very long display name, the WordPress admin bar layout breaks on both the frontend and backend, especially on smaller screen sizes.

Frontend (Logged-in View)

• On a full HD screen (1920px), the display name inside the "Howdy" section of the admin bar stretches far across the screen, pushing adjacent elements (like the search icon) off the edge.
• The long name causes the bar to overflow and the layout to become unbalanced, especially with full-width headers.
• See screenshot: ​1920px Screen Frontend.png

Backend (Admin Dashboard)

• On a smaller screen like 1440×900, the "Howdy" dropdown becomes extremely tall and misaligned due to the long display name.
• This pushes other dropdown items downward or off-screen.
• See screenshot: ​1940px Screen Backend.png

Normal Layout (Baseline Reference)

• On a 1920px screen in the backend, the admin bar appears mostly fine, though still stretched.
• See screenshot: ​1940px Screen Frontend.png

Character Count in test display name: 247 | Word Count: 40

Environment

• WordPress: 6.9-alpha-60328
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: MySQL 8.4.5 (mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: Windows 10/11
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None
• Plugins:
  • Test Reports 1.2.0

Steps to Reproduce

1. Create a user with a very long display name.
2. Log in as that user.
3. Open the WordPress backend dashboard on a smaller screen (e.g., laptop).
4. Observe the admin bar layout — it breaks due to the long name.
5. Visit the frontend while logged in.
6. 🐞 Observe how the admin bar and "Howdy" dropdown stretch or overflow, breaking the layout.

Expected Results

WordPress should handle long display names gracefully across all screen sizes. Ideally:

• Display names should be truncated, ellipsized (text-overflow: ellipsis), or wrapped safely.
• The admin bar should remain consistent in height and structure.
• A visual limit (e.g., 30–40 characters) could be enforced in the admin bar without limiting the actual data in the database.
• Layout should remain clean and unaffected in both frontend and backend, regardless of screen size.

Additional Notes

• This affects WordPress UI/UX even without third-party themes or plugins.

[dvpatel]

1920px screen Backend

[dvpatel]

1920px screen Frontend

[dvpatel]

1440px screen Backend

[rollybueno]

Reproduction Report

Description

This report validates whether the issue reported can be reproduced under certain conditions.

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 136.0.0.0
• OS: Linux
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0
  • User Switching 1.9.2

Actual Results

1. ❌ Error condition did not occur (not reproduced).
   • NO UI overlap or layout issues observed on the admin bar as described in the ticket.

Additional Notes

• Synced latest upstream trunk and pulled
• Run npm run dev, hard refresh then started testing
• Tested using Chrome DevTools screen size emulator.
• Also downgraded native 2K monitor resolution to 1920×1080 and 2560×1440 (1440p).
• ❗❗ I have tested this on emulator and forcing my monitor to the reported resolutions, however, it should be interesting to test on native resolution as well, which I don't have.

Supplemental Artifacts

❌ Emulator Backend - 1920

❌ Emulator Frontend - 1920

❌ Downgrading 2K resolution Backend - 1920

❌ Downgrading 2K resolution Frontend - 1920

❌ Downgrading 2K resolution Backend - 1440

❌ Downgrading 2K resolution Frontend - 1440

[rollybueno]

Hey @dvpatel, unfortunately I cannot reproduce this. Would you mind to confirm that you pulled latest trunk, had npm run dev, hard refresh before you discover this issue?

The only difference is that you are using Chrome 137 vs mine 136, although I doubt if that would be the trigger, even more so the OS.

[dvpatel]

Replying to rollybueno:

Hey @dvpatel, unfortunately I cannot reproduce this. Would you mind to confirm that you pulled latest trunk, had npm run dev, hard refresh before you discover this issue?

The only difference is that you are using Chrome 137 vs mine 136, although I doubt if that would be the trigger, even more so the OS.

Thank you for looking into this and taking the time to investigate. I appreciate your efforts in trying to reproduce the issue.

yes—I’ve confirmed that I pulled the latest trunk, ran npm run dev, and did a hard refresh. The issue still persists on my end.

I also double-checked with no plugins activated. The only difference remains the Chrome version (137 vs 136), but like you said, it seems unlikely that’s the cause. Still, the issue consistently appears for me on both frontend and backend when resizing to smaller screens.

Reproduction Report:

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.4
• Server: Apache/2.4.56 (Unix) OpenSSL/1.1.1t PHP/8.2.4 mod_perl/2.0.12 Perl/v5.34.1
• Database: mysqli (Server: 10.4.28-MariaDB / Client: mysqlnd 8.2.4)
• Browser: Chrome 137.0.0.0
• OS: macOS
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Steps to reproduce:

1. Set a long dummy name like:

   Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum
   

2. Ensure no plugins are active
3. View the site on frontend and backend
4. Resize to a smaller screen

Additional Observation

After reproducing the issue, I activated the Test Report plugin (for debugging purposes). Once this plugin was active, the admin info box layout broke even on the 1920px screen in the backend view—without needing to resize. This suggests the layout is fragile under certain content lengths or plugin output conditions.

Screen recording of the issue

​https://app.screencastify.com/watch/OZuLxu1Ejl0ikk9IwQpU

[rollybueno]

Aha, finally figured it out, I had to stretch the display_name to 250 characters to trigger the issue. I’ll write up a new set of detailed reproduction steps next.

[rollybueno]

Reproduction Report

Description

This report validates whether the issue can be reproduced.

Environment

• WordPress: 6.9-alpha-60093-src
• PHP: 8.2.28
• Server: nginx/1.27.5
• Database: mysqli (Server: 8.4.5 / Client: mysqlnd 8.2.28)
• Browser: Chrome 137.0.0.0
• OS: Linux
• Theme: Twenty Twenty-Five 1.2
• MU Plugins: None activated
• Plugins:
  • Test Reports 1.2.0

Actual Results

1. ✅ Error condition occurs (reproduced).

Additional Notes

• Issue reproduces when display_name is 240 characters long.
• Used this exact test string for display_name:

  Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is sim
  

• You may use WP-CLI to quickly apply the display_name to an existing user:

  npm run env:cli -- user update 2 --display_name="Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is simply dummy text of the printing and typesetting industry Lorem Ipsum is sim"
  

• ⚠️ Make sure 2 refers to a valid test user ID in your local environment.
• Tested using Chrome DevTools screen size emulator.
• Also verified on physical screen resolutions downgraded to 1920×1080 and 1440p.

Supplemental Artifacts

✅ 1920

✅ 1440

[devasheeshkaul]

• Display names should be truncated, ellipsized (text-overflow: ellipsis), or wrapped safely.
• A visual limit (e.g., 30–40 characters) could be enforced in the admin bar without limiting the actual data in the database.

I've tested this issue by applying CSS based truncation to the display name in both the admin bar and the user info dropdown. While the truncation works visually using text-overflow: ellipsis, I noticed that the layout in the user info panel introduces problems.

The issue comes from the existing CSS, where the container elements have a fixed height, causing the text to overflow the container. When a long display name is rendered, this limited height, combined with overflow: hidden, cuts off the text horizontally.

This might require more layout or styling changes for the user info section, so I assume it would be better to do backend based truncation, making it a more cleaner approach. I'll work on a patch for this, would be great to hear any additional thoughts.

Long user display names can cause the admin bar and user info dropdown layout to break, especially on smaller screens. This PR fixes the issue by truncating the display name to 40 characters in the backend before rendering, ensuring the layout remains stable and consistent.

Trac ticket: https://core.trac.wordpress.org/ticket/63607

### Before

### After