Media Library: Image title and caption overlap when editing galleries

[jordesign]

When adding or editing a gallery the thumbnails display the image title displaying over the top of the Caption. Making both (but particularly the caption) hard to read.

[jordesign]

Screenshot of Gallery caption + title conflict

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

## What, Why, and How?

In the Edit Gallery view of the media modal, each image gets a filename overlay and an (intentional) caption input. The overlay shows up in other media views too, but the input is unique to this screen, and that’s where they overlap.

The overlay is an ::after on .attachment, absolutely positioned at bottom: 8px. This works elsewhere. However, on Edit Gallery, the caption field sits in that same bottom strip, so the overlay covers it.

There are a few ways to fix this. We could move the overlay one level up in the DOM so the input is naturally accounted for, but that means changing the attachment template and checking every media modal view for regressions. A grid layout would also stack them cleanly. This PR instead keeps the current absolute positioning and raises bottom when the caption input is present. Attachment padding (8px) and the input’s min-height (40px) are already hardcoded, so bottom: calc(8px + 40px) fixes the overlap as a minor CSS change.

### Screenshots

Before	After

## Use of AI Tools

AI assistance: Yes
Tool(s): Codex
Model(s): GPT-5.6 Astra
Used for: Debugging and checking out various potential solutions.

[arkaprabhachowdhury]

Test Report

Description

This report validates that PR #13468 addresses the issue in Trac #66076.

Patch tested: ​https://github.com/WordPress/wordpress-develop/pull/13468 at e8b26e0a84c1276ec324bf01e04a6f7c3a971d97

Environment

• WordPress: 7.2-alpha-20260910.050006
• PHP: 7.4.33
• Server: PHP.wasm / WordPress Playground
• Browser: Chrome
• OS: Windows
• Theme: Twenty Twenty-Five
• Plugins: None activated

Steps to Test

1. Opened the PR-specific WordPress Playground.
2. Inserted a Gallery block.
3. Selected an image from the Media Library.
4. Added the caption Readable test caption.
5. Opened Edit Gallery.
6. Verified the title overlay and caption field.
7. Inserted the gallery back into the editor.
8. Verified that the caption persisted.

Expected Results

• The image title overlay does not cover the caption field.
• The caption remains readable and editable.

Actual Results

• [pass] The title overlay appeared above the caption field.
• [pass] The caption remained readable and editable.
• [pass] The gallery inserted successfully.
• [pass] The caption persisted after insertion.

Supplemental Artifacts

• Before patch: ​https://github.com/user-attachments/assets/ee1ee2cd-1247-4458-bd10-e3eef534b6e8
• After patch: ​https://github.com/user-attachments/assets/cd539374-a963-48cd-b46b-f0d7a48ec150
• Before patch: ​https://github.com/user-attachments/assets/fd2c6ae7-27ae-41b9-b2b0-685854422d05
• After patch: ​https://github.com/user-attachments/assets/66bc65f6-1918-40fc-9f37-7adae84fb583

Tested in Chrome using the PR-specific Playground. The patch passes the end-to-end flow.

[joedolson]

Updated the ticket title to clarify the issue's context.

[sabernhardt]

Related: #65896

[eishanoor]

Tested Trac #66076 with the proposed fix in PR #13468.
Environment

• WordPress: 7.1.2
• PHP: 8.2.29
• Server: nginx
• OS: macOS
• Browser: Chrome
• Plugins: None

Steps to Test

1. Added a Gallery block with multiple images.
2. Opened Media Library → Edit gallery.
3. Added the caption Readable test caption.
4. Confirmed that the image title/filename overlapped the caption before applying the fix.
5. Applied the CSS change from PR #13468.
6. Reopened Edit gallery and checked the same gallery again.

Results

• ✅ Before the fix, the title/filename overlapped the caption area.
• ✅ After the fix, the title/filename is positioned above the caption.
• ✅ The caption remains readable and editable.
• ✅ Gallery images continue to display correctly.

Result: The proposed fix resolves the overlap issue in my environment.

Screenshots attached:

• Before fix
• After fix

[eishanoor]

Before fix: Image title/filename overlaps the gallery caption field.

[eishanoor]

After fix: Image title/filename is positioned above the caption with no overlap.

[joedolson]

#66293 was marked as a duplicate.