[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 (bug)             |      Status:  new
 Priority:  normal                   |   Milestone:  Awaiting Review
Component:  Toolbar                  |     Version:
 Severity:  normal                   |  Resolution:
 Keywords:  2nd-opinion needs-patch  |     Focuses:  ui, css,
  has-screenshots                    |  administration
-------------------------------------+-------------------------------------

Comment (by 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.

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