From f882d93c4db15f47a6ab50a2d50281f2d24a8c63 Mon Sep 17 00:00:00 2001
From: Ramon <ramonjd@gmail.com>
Date: Thu, 4 Jun 2026 16:38:45 +1000
Subject: [PATCH] Media Editor: Fix sidebar overflowing the modal between the
 small and medium breakpoints

Below 782px the ComplementaryArea renders in its full-screen "mobile" mode
and sets an inline width: 100vw on the panel and its animated wrapper. The
media editor hosts that sidebar inside a modal that, between 600 and 782px,
is inset from the viewport edges, so 100vw is wider than the dialog and the
absolutely-positioned skeleton sidebar spills past the modal's right edge
and over the canvas.

Scope a CSS override to the media editor: below the medium breakpoint, fill
the modal (100%) instead of the viewport, and only widen the skeleton
sidebar wrapper while the panel is open so the empty wrapper does not cover
the canvas when the panel is closed.
---
 packages/media-editor/CHANGELOG.md            |  4 +++
 .../src/components/media-editor/style.scss    | 29 +++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/packages/media-editor/CHANGELOG.md b/packages/media-editor/CHANGELOG.md
index d428248aef3a9c..c913df97d88b5d 100644
--- a/packages/media-editor/CHANGELOG.md
+++ b/packages/media-editor/CHANGELOG.md
@@ -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).
diff --git a/packages/media-editor/src/components/media-editor/style.scss b/packages/media-editor/src/components/media-editor/style.scss
index f4b469d2364f8b..c7d54eede04b1d 100644
--- a/packages/media-editor/src/components/media-editor/style.scss
+++ b/packages/media-editor/src/components/media-editor/style.scss
@@ -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 *;
@@ -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 {