Front-End Toolbar: Mobile Safari Icons Misaligned

[ianstewart]

It appears that our front-end toolbar is responding incorrectly in mobile Safari. With icons seemingly randomly placed.

Here's a closer look. The red boxes are all the same size.

[obenland]

@frontdevde Could you help me recall if this ticket was supposed to be moved to the Janitor board or closed as a duplicate of a ticket there? I can't seem to find a duplicate right now.

[frontdevde]

I remember seeing this as an issue re: spacing in the masterbar similar to this during the first Janitor rotation. IIRC it was reported by Lance a long time ago. That said, I can't seem to find it on the Janitor board (anymore). So let's keep it as an issue and add it to the Janitor board.

[ianstewart]

It appears to have taken on a new form that is looking broken on mobile in a new way now.

[sixhours]

It's broken in Chrome, too:

[sixhours]

Looks like this may have been partially broken in D44873-code where we're setting 54px of left padding on the admin container to accommodate the hamburger menu in the editor on mobile.

But I don't see a hamburger menu on mobile in the editor any more, nor do I see the admin bar (although there are plenty of layout problems in the editor toolbar on mobile...):

Atomic

Simple

@yansern Do you happen to know if the hamburger menu has been removed from the masterbar since this change was made back in March? Is it safe to remove the left padding fix? If not, I'll look at making the rule more specific...

[obenland]

@yansern @sixhours Any chance you could take another look at this?

[yansern]

@yansern Do you happen to know if the hamburger menu has been removed from the masterbar since this change was made back in March?

I don't think the hamburger menu has been removed from the masterbar (as in the masterbar with the black background, right?) as from a recent PR (on Gutenberg) I see it is there WordPress/gutenberg#28526.

Is it safe to remove the left padding fix? If not, I'll look at making the rule more specific...

I think perhaps old fix do not apply to new ones. It's most likely there are changes over time and probably would be easier to apply a new fix that works and keeping old ones in.

(This is just a quick reply, I'll take a look a little deeper and post an update again as I'm on gardening rotation now.)

[sixhours]

This might be fixed by D59796-code

[cuemarie]

This report was found during a recent backlog sweep.

📌 SCRUBBING : RESULT - Replicated / Could Not Replicate / Uncertain

• Tested on Simple - Could Not Replicate

📌 FINDINGS/SCREENSHOTS/VIDEO
Quite a bit of time has past since this was last updated, and things are looking good on mobile Safari!

My Home

Post Editor

📌 ACTIONS

• Closing as resolved