Media editor: tweak paddings and margins

[ramonjd]

What?

Adds margin adjustments for the media editor modal to ensure uniform padding.

Why?

Gets us closer to uniformity and to make sure the focusable element at the bottom of the data form in the details tab isn't cut off.

Related comment:

#78896 (comment)

Testing Instructions

Check in your browsers. Things should look okay.

The tabs underline shouldn't go to the edge.

Screenshots or screencast

Before	After

Use of AI Tools

None.

[github-actions]

Size Change: +105 B (0%)

Total Size: 8.44 MB

📦 View Changed

Filename	Size	Change
build/styles/editor/style-rtl.css	30.4 kB	+26 B (+0.09%)
build/styles/editor/style-rtl.min.css	25.9 kB	+29 B (+0.11%)
build/styles/editor/style.css	30.5 kB	+28 B (+0.09%)
build/styles/editor/style.min.css	25.8 kB	+22 B (+0.09%)

_{compressed-size-action}

[github-actions]

Flaky tests detected in 2d61ec2.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/27177290219
📝 Reported issues:

• [Flaky Test] should be preserved on first navigation with data-wp-key and attachTo #75767 in /test/e2e/specs/interactivity/router-regions.spec.ts
• [Flaky Test] should paste block styles using keyboard #78759 in /test/e2e/specs/editor/various/list-view.spec.js

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ramonjd <ramonopoly@git.wordpress.org>
Co-authored-by: andrewserong <andrewserong@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[ramonjd]

Prevents this:

[ramonjd]

Kapture.2026-06-09.at.11.12.03.mp4

Ensures min and max width to avoid collapsing of handles, and also the double scroll bars from the previous attempt Props @andrewserong

[andrewserong]

LGTM, thanks for all the back and forth on this!

Just left a non-blocking (and subjective) comment about the top margin, but the rest is looking good to me, and the minimum sizes and z-index appear to be working well too 👍

🚀

[andrewserong]

To me this change feels a little unbalanced. While it gets the vertical gap close to the horizontal ones, it has the effect that the modal title isn't vertically centered in the white space between the canvas and the top of the modal.

E.g. with this change:

Without this change (vertical spacing as on trunk):

This is likely a personal preference thing, but IMO the horizontal padding and margins are more important to make consistent than this top one, so that the header stands out a little more on its own.

Easy to change, though, so not a blocker IMO. It mostly came to mind as when I was looking at the linked comment in the PR description from @fcoveram (#78896 (comment)) it looked like it was about the horizontal spacing rather than the vertical 🤔

[ramonjd]

Thanks @andrewserong

I was never sure about this one. The modal header is not built to accommodate customization at all, and now I think you've tipped me over the edge to just remove this change so we can deal with it later.

We can always approach it in a new PR that's more targeted.