[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 dvpatel):

 Replying to [comment:3 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]

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