@@ -93,7 +93,6 @@ $z-layers: (
 	".editor-post-template__swap-template-modal": 1000001,
 	".editor-post-template__create-template-modal": 1000001,
 	".editor-sync-connection-error-modal": 1000001,
-	".media-editor-modal__footer": 1000001,
 	".components-snackbar-list.media-editor-modal__snackbar": 1000001,
 
 	// Show media replace flow and similar popovers beneath the media modal when its open.
 
@@ -6,11 +6,13 @@
 
 ### Enhancements
 
--   Add a `scope` prop to `MediaEditor` so each frame can keep its own persisted details-sidebar visibility ([#81559](https://github.com/WordPress/gutenberg/pull/81559)).
+-   `MediaEditor`: replace `ComplementaryArea` and `InterfaceSkeleton` with a layout the media editor owns, and widen the settings panel so its controls and fields are not so cramped ([#81840](https://github.com/WordPress/gutenberg/pull/81840)).
+-   `MediaEditor.ImageControls` is removed, and `renderFrame` drops `hasCanvas`. Both were added in the same unreleased cycle: the transform controls belong to the Crop panel, and `HistoryActions` already renders nothing when a panel covers the canvas, so a frame gating on it repeated that check from the outside. The `scope` prop is removed too: it named an `@wordpress/interface` scope that persisted the panel's open state, which went with `ComplementaryArea` ([#81840](https://github.com/WordPress/gutenberg/pull/81840)).
 -   Expose the header, history (reset/undo/redo), save (cancel/save) and image control clusters as `MediaEditor` sub-components, so each frame imports and arranges them to suit its own chrome. `renderFrame` now passes data only: `footerActions` is gone, `footerLayout` is now `layout`, and `isImage` is new. `showCloseButton` moves from `MediaEditor` to `MediaEditor.HeaderActions` ([#81563](https://github.com/WordPress/gutenberg/pull/81563)).
 
 ### Bug Fixes
 
+-   `MediaEditor`: make the Details fields reachable below the `small` breakpoint. `ComplementaryArea` closed the sidebar on small viewports and offered no way to re-open it, so the fields could not be edited on a phone at all ([#81840](https://github.com/WordPress/gutenberg/pull/81840)).
 -   Keep the Details sidebar from clipping focus outlines, with balanced horizontal padding ([#81703](https://github.com/WordPress/gutenberg/pull/81703)).
 -   Keep initial focus on the modal dialog frame instead of moving it to the crop area once the image loads ([#81541](https://github.com/WordPress/gutenberg/pull/81541)).
 
 
@@ -44,6 +44,7 @@
 	],
 	"dependencies": {
 		"@wordpress/a11y": "file:../a11y",
+		"@wordpress/admin-ui": "file:../admin-ui",
 		"@wordpress/api-fetch": "file:../api-fetch",
 		"@wordpress/base-styles": "file:../base-styles",
 		"@wordpress/components": "file:../components",
@@ -55,7 +56,6 @@
 		"@wordpress/element": "file:../element",
 		"@wordpress/i18n": "file:../i18n",
 		"@wordpress/icons": "file:../icons",
-		"@wordpress/interface": "file:../interface",
 		"@wordpress/keyboard-shortcuts": "file:../keyboard-shortcuts",
 		"@wordpress/keycodes": "file:../keycodes",
 		"@wordpress/notices": "file:../notices",
 
@@ -16,29 +16,21 @@ export interface MediaEditorCropPanelProps {
 	onAspectRatioChange: ( value: string ) => void;
 	/** Aspect-ratio presets to display in the selector. */
 	aspectRatioOptions: AspectRatioPreset[];
-	/**
-	 * When `true`, render the rotate/flip/zoom image controls at the top of
-	 * the panel. Used on wide viewports where the footer no longer carries
-	 * them.
-	 */
-	showTransformControls?: boolean;
 }
 
 /**
- * Sidebar panel for crop controls. Renders the aspect-ratio selector, plus the
- * rotate/flip and zoom controls on wide viewports (these move to the footer
- * toolbar when the sidebar collapses).
+ * Sidebar panel for crop controls: rotate, flip and zoom above the
+ * aspect-ratio selector. Rendered where the panel docks; below that the
+ * transform controls sit under the canvas instead, placed by the editor.
  * @param props
  * @param props.aspectRatioValue
  * @param props.onAspectRatioChange
  * @param props.aspectRatioOptions
- * @param props.showTransformControls
  */
 export default function MediaEditorCropPanel( {
 	aspectRatioValue,
 	onAspectRatioChange,
 	aspectRatioOptions,
-	showTransformControls = false,
 }: MediaEditorCropPanelProps ) {
 	return (
 		// Tag the whole panel as a crop-control region so the modal's
@@ -52,7 +44,7 @@ export default function MediaEditorCropPanel( {
 			<VisuallyHidden render={ <h2 /> }>
 				{ __( 'Crop options' ) }
 			</VisuallyHidden>
-			{ showTransformControls && <MediaEditorImageControls withLabels /> }
+			<MediaEditorImageControls withLabels />
 			<SelectControl
 				label={ __( 'Aspect ratio' ) }
 				value={ aspectRatioValue }
 
@@ -44,17 +44,9 @@ describe( 'MediaEditorCropPanel', () => {
 		).toBe( '0' );
 	} );
 
-	it( 'omits the image controls by default', () => {
+	it( 'renders rotate, flip and zoom controls', () => {
 		setupCropPanel();
 
-		expect( screen.queryByText( 'Rotate' ) ).not.toBeInTheDocument();
-		expect( screen.queryByText( 'Flip' ) ).not.toBeInTheDocument();
-		expect( screen.queryByText( 'Zoom' ) ).not.toBeInTheDocument();
-	} );
-
-	it( 'renders rotate, flip and zoom controls when showTransformControls is set', () => {
-		setupCropPanel( { showTransformControls: true } );
-
 		expect( screen.getByText( 'Rotate' ) ).toBeInTheDocument();
 		expect( screen.getByText( 'Flip' ) ).toBeInTheDocument();
 		expect( screen.getByText( 'Zoom' ) ).toBeInTheDocument();
@@ -67,7 +59,7 @@ describe( 'MediaEditorCropPanel', () => {
 	} );
 
 	it( 'renders the image controls above the aspect-ratio selector', () => {
-		setupCropPanel( { showTransformControls: true } );
+		setupCropPanel();
 
 		const rotate = screen.getByText( 'Rotate' );
 		const aspectRatio = screen.getByLabelText( 'Aspect ratio' );
 
@@ -26,40 +26,21 @@ interface MediaEditorModalProps {
 	aspectRatioPresets?: AspectRatioPreset[];
 }
 
-interface ModalFooterProps {
-	layout: 'wide' | 'narrow';
-}
-
 /**
- * The modal's footer chrome. The fine-rotation ruler always lives under the
- * canvas (in `media-editor__content`), never here, so it stays constrained to
- * the canvas column at every viewport. One JSX tree per layout; DOM order
- * matches visual order.
+ * The modal's footer chrome. The fine-rotation ruler and the image controls
+ * both live under the canvas (in `media-editor__content`), never here, so the
+ * footer has one layout at every width: History on the left, Cancel/Save on
+ * the right.
  */
-function ModalFooter( { layout }: ModalFooterProps ) {
+function ModalFooter() {
 	return (
 		<div
-			className={ `media-editor-modal__footer is-${ layout }` }
+			className="media-editor-modal__footer"
 			role="region"
 			aria-label={ __( 'Editor actions' ) }
 		>
-			{ layout === 'wide' ? (
-				// Sidebar is a column: the image controls live in the Crop
-				// panel, so the footer is just History + Cancel/Save.
-				<>
-					<MediaEditor.HistoryActions />
-					<MediaEditor.SaveActions />
-				</>
-			) : (
-				// Sidebar collapsed: the image controls drop into the footer.
-				<>
-					<MediaEditor.ImageControls />
-					<div className="media-editor-modal__footer-row">
-						<MediaEditor.HistoryActions />
-						<MediaEditor.SaveActions />
-					</div>
-				</>
-			) }
+			<MediaEditor.HistoryActions />
+			<MediaEditor.SaveActions />
 		</div>
 	);
 }
@@ -144,7 +125,6 @@ export function MediaEditorModal( {
 			} }
 			renderFrame={ ( {
 				children,
-				layout,
 				onRequestClose,
 				onKeyDown,
 				shouldCloseOnClickOutside,
@@ -166,7 +146,7 @@ export function MediaEditorModal( {
 						}
 					>
 						{ children }
-						<ModalFooter layout={ layout } />
+						<ModalFooter />
 					</Modal>
 				</ShortcutProvider>
 			) }
 
@@ -21,61 +21,20 @@
 	min-height: 0;
 }
 
-// Footer chrome — two layouts driven by `is-wide` / `is-narrow` modifier
-// classes set from the media editor at the sidebar-collapse breakpoint.
-// Wide is a single flex row (History | Cancel/Save); narrow stacks via
-// `flex-direction: column` (image controls above the History |
-// Cancel/Save row). Each layout has its own JSX tree (not `order`
-// reshuffling, which the project's stylelint rule treats as an a11y red
-// flag), so DOM order always matches visual order.
+// Footer chrome. The image controls live under the canvas at every viewport,
+// so the footer has a single layout at every width: History on the left,
+// Cancel/Save on the right.
 .media-editor-modal.components-modal__frame .media-editor-modal__footer {
 	flex-shrink: 0;
 	display: flex;
-	gap: $grid-unit-20;
-	// Borderless: sections are demarcated by the inset canvas panel and
-	// spacing, not divider lines. 16px top / 32px sides / 24px bottom.
-	padding: $grid-unit-20 $grid-unit-40 $grid-unit-30;
-	background: $white;
-	// Above the `.interface-interface-skeleton__sidebar` which has a z-index of 100000.
-	z-index: z-index(".media-editor-modal__footer");
-
-	&.is-wide {
-		flex-direction: row;
-		align-items: center;
-
-		// Panel mode: the footer holds only History (left) and
-		// Cancel/Save (right). `margin-left: auto` pins the actions to the
-		// right edge whether or not History renders (e.g. non-image
-		// attachments show only `SaveActions`).
-		.media-editor__save-actions {
-			margin-left: auto;
-		}
-	}
-
-	&.is-narrow {
-		flex-direction: column;
-	}
-
-	// Narrow only: image controls sit on their own row, centered.
-	&.is-narrow > .media-editor-image-controls {
-		align-self: center;
-	}
-}
-
-// Secondary row used by medium (History + Image controls + Cancel/Save) and
-// narrow (History + Cancel/Save). `margin-left: auto` on the image controls
-// cluster and on Cancel/Save splits any free space — History gets the
-// left edge, Cancel/Save the right edge, and the image controls (when
-// present, i.e. medium only) approximately centers. Exact centering only
-// holds when History and Cancel/Save have matching widths; in practice
-// they're close enough that the offset is imperceptible.
-.media-editor-modal__footer-row {
-	display: flex;
-	flex-wrap: wrap;
+	flex-direction: row;
 	align-items: center;
 	gap: $grid-unit-20;
+	padding: $grid-unit-30;
+	background: $white;
 
-	.media-editor-image-controls,
+	// `margin-left: auto` pins the actions to the right edge whether or not
+	// History renders (e.g. non-image attachments show only `SaveActions`).
 	.media-editor__save-actions {
 		margin-left: auto;
 	}