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!