Information about image is jumping in media modal

[pavelevap]

When changing title or caption, changes are saved automatically, but information about image is jumping and it is very distracting. It is caused by "Saved." message which is displayed for a sec. See attached screenshots.

[SergeyBiryukov]

Confirmed. This is caused by a long translated string in the header: "Podrobné informace o souboru".

Doesn't happen with a shorter string: 27914.shorter-string.png​.

[nacin]

I don't think this is a regression in 3.9 and likely dates to 3.5.

[pavelevap]

Yes, you are right, I tested 3.5.1 and there is the same problem.

[mrpritchett]

Testing this on trunk and submitting a patch if it is still an issue.

[joedolson]

This is still an issue today; but this should be easily resolved.

[joedolson]

Patch changes the heading to display: grid so the whole area has a defined space. Long headings will wrap, but if there's any page shift (due to a long translation for 'Saved.'), it'll be significantly more subtle.

[antpb]

Just echoing what was discussed in the Media Meeting where we reviewed the patch here. It seems that the grid is being respected on my local but still jumping around when the attachment details h2 content is just long enough to not have enough space for the "save" message.

One option mentioned is maybe having a reserved static height area below the h2 for the save message to prevent jumping around. I'm not completely confident that is the right thing to do but it definitely solves the problem more simply.

[shailu25]

Test Report

Patch Tested: https://core.trac.wordpress.org/attachment/ticket/27914/27914.diff

Environment:

WordPress - 6.5-beta2-57703
OS - Windows
Browser - Chrome
Theme: Twenty Twenty-Four
PHP - 8.1.23
Active Plugin - Test Reports

Actual Results:

• Patch is not working.❌ (Jumping issue is still occurs in Modal)

Attachment:

• ​https://drive.google.com/file/d/1rKYK7mQSm-7vMM8mRCxkUmtf4pOhnLYV/view

[swissspidy]

Since the patch needs more work, are you confident this can be resolved before 6.5 RC 1? This looks like a punt candidate.

[joedolson]

I think it makes more sense to punt this for 6.6. It could get finished, but...on the whole, I'd rather not stress myself out over it.

[joedolson]

Updated patch

[joedolson]

This patch provides a little more space for the 'Saved.' text, but also compensates for the loading spinner by positioning it absolutely. Part of what was causing the text shift was that the loading spinner takes up space even when invisible, and the brief window when both the loading spinner and the 'Saved.' confirmation were visible caused the amount of space needed to be greater than the length of either item individually.

[antpb]

Confirmed latest patch working

[joedolson]

Updated patch. Isolates the grid layout to only this heading, to avoid impacting other headings.

[joedolson]

In 58352:

Media: Prevent shifting on details update in media modal.

Fix issue where the image details would shift position during AJAX updates in the media modal. Occurred when the Attachment Details heading was translated into a language where the text no longer alowed space for the 'Saved' message to the right of the message.

Props pavelevap, SergeyBiryukov, antpb, joedolson, shailu25.
Fixes #27914.