Skip to content

Media Editor: Fix sidebar overflowing the modal between the small and medium breakpoints #78931

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ramonjd merged 1 commit into from
Jun 4, 2026
Merged

Media Editor: Fix sidebar overflowing the modal between the small and medium breakpoints #78931

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions packages/media-editor/CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,10 @@

## Unreleased

### Bug Fixes

- Media Editor: Stop the details/crop sidebar overflowing the modal between the small and medium breakpoints.

### Code Quality

- Add missing `@types/react` dependency. [#78882](https://github.com/WordPress/gutenberg/pull/78882).
29 changes: 29 additions & 0 deletions packages/media-editor/src/components/media-editor/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@use "@wordpress/base-styles/breakpoints" as breakpoints;
@use "@wordpress/base-styles/colors" as *;
@use "@wordpress/base-styles/mixins" as *;
@use "@wordpress/base-styles/variables" as *;
Expand Down Expand Up @@ -73,6 +74,34 @@
}
}
}

// Below the medium breakpoint the `ComplementaryArea` switches to its
// full-screen "mobile" mode and stretches the panel to `100vw`, set
// inline on both the animated fill wrapper and the panel itself. The
// media editor runs inside a modal that, between the small and medium
// breakpoints, is inset from the viewport edges — so `100vw` is wider
// than the dialog, spilling the sidebar past its right edge and over the
// canvas. Pin the sidebar to the modal by filling its container instead
// of the viewport, and override the two inline `100vw` declarations
// (`!important` is the only way to beat an inline style). The whole
// override is scoped to this breakpoint so the desktop sidebar width is
// untouched.
@media (max-width: #{ (breakpoints.$break-medium - 1) }) {
// The skeleton sidebar wrapper is always present — it's just empty
// when the panel is closed (the default at this breakpoint). Only
// give it a definite width while the panel is open (`__fill` is
// rendered), otherwise the empty, white, absolutely-positioned
// wrapper would cover the canvas. When the panel is open it would
// otherwise shrink-wrap to nothing, since `__fill` below is `100%`.
.interface-interface-skeleton__sidebar:has(.interface-complementary-area__fill) {
width: 100%;
}

.interface-complementary-area__fill,
.interface-complementary-area {
width: 100% !important;
}
}
}

.media-editor__snackbar {
Expand Down
Loading