[wp-trac] [WordPress Trac] #63607: Long display name breaks admin bar layout on frontend and backend at smaller screen sizes

[WordPress Trac]

#63607: Long display name breaks admin bar layout on frontend and backend at
smaller screen sizes
-------------------------+-------------------------------------------------
 Reporter:  dvpatel      |      Owner:  (none)
     Type:  defect       |     Status:  new
  (bug)                  |
 Priority:  normal       |  Milestone:  Awaiting Review
Component:  Users        |    Version:
 Severity:  normal       |   Keywords:  2nd-opinion needs-patch has-
  Focuses:  ui, css,     |  screenshots
  administration         |
-------------------------+-------------------------------------------------
 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: [https://prnt.sc/RKNEors80_my 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: [https://prnt.sc/WFLv6CFbQPQY 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: [https://prnt.sc/kapTq3TbBRnD 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.

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/63607>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform