Site icon in the Admin Bar (Toolbar) sits atop the site title when using a tablet in portrait orientation

[jdab]

The issue

When logged in to the Dashboard, the site icon now appears in the Admin Bar/Toolbar (as of WordPress 7.1).

Whilst carrying out some testing on an old iPad in portrait mode, I noticed that the site icon is appearing in the Admin Bar atop part of the site title (only ~7 characters show due to limited space).

I cannot seem to replicate the display issue by simply resizing the browser window on a computer, it only seems to do this when on the iPad. When testing on my desktop or phone with various resolutions, I've found that it will either drop the site title completely, or display it next to the site icon if there is room. I'm assuming that this is the intended behaviour and what I'm experiencing on the iPad is not.

I found this issue when testing some of my own websites, and then reproduced it in a clean installation via Playground.

I've attached a screenshot of the issue which should hopefully help.

Environment

• WordPress version: 7.1
• Device: Apple iPad, model number MR7J2B/A (6th generation)
• Operating system: iPadOS 17.7.11
• Browser: Safari
• Orientation: Portrait (logical resolution width of 768px)

I understand it's an old device with a dated resolution. Unfortunately, I don't have anything else to test it on, so it might just be that it's isolated to this specific one.

Steps to reproduce the issue

1. Log in to a website running WordPress 7.1
2. Ensure both a site title and site icon are assigned
3. Check the site icon/site title area of the Admin Bar

[jdab]

Evidence of the site icon appearing on top of the site title

[audrasjb]

Moving for 7.1.1 consideration as this was introduced in 7.1.

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

## Description

### Problem

When a site icon is set, the site title can remain visible in the Admin Bar on narrow viewports, clipped to the width of the node, with the site icon rendered on top of it. Reported on iPadOS 17 Safari at 768px.

### Cause

display: flex is applied to the site name node unconditionally when a site icon is present:

#wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item {
        display: flex;
        align-items: center;
        gap: 6px;
}

Below 783px the Admin Bar hides every node's text label using text-indent: 100% with overflow: hidden and a fixed 52px width. That responsive rule has lower specificity than the flex rule above, so the flex layout is never unwound.

text-indent applies to block containers, not flex containers. It reaches the title only by inheriting into the anonymous flex item that wraps the text, and browsers differ on whether that happens. Where it does not, the title renders at zero indent and is clipped to 52px, while the site icon - already taken out of flow by position: absolute in the same media query -overlaps it.

This is a rendering difference between browser engines rather than a specific viewport width.

Notably, this is the only display: flex .ab-item in the stylesheet. The equivalent node #wp-admin-bar-my-account.with-avatar, which also pairs an image with a text label and also positions that image absolutely on narrow screens, remains a block container and is unaffected.

Introduced in r62625 (#65088).

### Fix

Reset the node to a block container inside the max-width: 782px media query:

#wpadminbar #wp-admin-bar-site-name.has-site-icon > .ab-item {
        display: block;
}

The selector matches the specificity of the desktop rule and appears later, so it takes effect. Flex serves no purpose below 783px because the icon is positioned absolutely there, so this restores the same text-hiding behaviour used by every other Admin Bar node. Desktop layout is unchanged, as the rule is scoped to the media query.

### Testing instructions

1. Set both a site title and a site icon.
2. Load the Dashboard on a viewport narrower than 783px.
3. Confirm only the site icon is visible, with no site title text behind or beside it.
4. Confirm the site title still appears next to the icon above 782px.
5. Confirm sites without a site icon still show the home dashicon at all widths.

Verified on iPadOS 17 Safari at 768px, where the issue was reproducible before this change.

### Screenshots

Before	After

## Use of AI Tools

AI assistance: Yes
Tool(s): Claude Code
Model(s): Opus 5
Used for: Initial debugging and issue implementation.

[jdab]

Thanks for turning that around so quickly!

I have requested some reviews for this one as I'm not familiar with the CSS.

Please note the RC for 7.1.1 is September 10th if we want it included in that version. Otherwise it is fine to punt to 7.1.2.

Also cc: @scruffian if you have time 😄 Thanks!

[tyxla]

Picking up to commit and merge this more timely for 7.1.1.

[tyxla]

In 63554:

Toolbar: Prevent the site title from showing behind the site icon on narrow screens.

Below 783px the Admin Bar hides each node's text label with text-indent, which
has no effect on the site name node because setting a site icon makes it a flex
container. Depending on the browser engine, the title then renders unindented
and clipped, with the absolutely positioned icon drawn on top of it.

Reset the node to a block container within the max-width: 782px media query.
Flex serves no purpose there, as the icon is taken out of flow anyway.

Developed in: ​https://github.com/WordPress/wordpress-develop/pull/13434

Props hbhalodia, jdab, audrasjb, adamsilverstein, fushar, tyxla.

Fixes #66064.

[tyxla]

Reopening for porting this to the 7.1 branch.

[tyxla]

In 63555:

Toolbar: Prevent the site title from showing behind the site icon on narrow screens.

Merges [63554] to the 7.1 branch.

See #66064.

[tyxla]

Committed to trunk in [63554].

Merged to the 7.1 release branch: [63555]

Closing as fixed.

[sabernhardt]

[63555] already committed the change to the 7.1 branch, but that should have had the ​double sign-off. If another committer agrees with the change, please approve it.

(FWIW, I agree with the change.)

[joedolson]

Approved for backport to 7.1.

@tyxla As in the previous post-commit approval, please review the backport processes. Thanks!

[tyxla]

Sorry for the trouble, folks, will review.

Thanks for the post-commit approval, @joedolson.

[jorbin]

@tyxla sorry to add on, but next time please also try remember to include the props in the backport so that it can be parsed when doing the minor release credits.

[tyxla]

Sure thing @jorbin, thanks