From de096d3c3e8862560d19d396fe8718b4f63d4736 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Tue, 2 May 2023 13:18:31 +1000
Subject: [PATCH] Global Styles: Fix positioning of gradient palette popovers
 on mobile

---
 .../components/global-styles/gradients-palette-panel.js   | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
index 747534993c593..4c791b8e6b011 100644
--- a/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/gradients-palette-panel.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalVStack as VStack,
 	__experimentalPaletteEdit as PaletteEdit,
@@ -17,6 +18,7 @@ import Subtitle from './subtitle';
 import { unlock } from '../../private-apis';
 
 const { useGlobalSetting } = unlock( blockEditorPrivateApis );
+const mobilePopoverProps = { placement: 'bottom-start', offset: 8 };
 
 const noop = () => {};
 
@@ -63,6 +65,9 @@ export default function GradientPalettePanel( { name } ) {
 		...( defaultDuotone && defaultDuotoneEnabled ? defaultDuotone : [] ),
 	];
 
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const popoverProps = isMobileViewport ? mobilePopoverProps : undefined;
+
 	return (
 		<VStack
 			className="edit-site-global-styles-gradient-palette-panel"
@@ -76,6 +81,7 @@ export default function GradientPalettePanel( { name } ) {
 					onChange={ setThemeGradients }
 					paletteLabel={ __( 'Theme' ) }
 					paletteLabelHeadingLevel={ 3 }
+					popoverProps={ popoverProps }
 				/>
 			) }
 			{ !! defaultGradients &&
@@ -88,6 +94,7 @@ export default function GradientPalettePanel( { name } ) {
 						onChange={ setDefaultGradients }
 						paletteLabel={ __( 'Default' ) }
 						paletteLabelLevel={ 3 }
+						popoverProps={ popoverProps }
 					/>
 				) }
 			<PaletteEdit
@@ -99,6 +106,7 @@ export default function GradientPalettePanel( { name } ) {
 					'Custom gradients are empty! Add some gradients to create your own palette.'
 				) }
 				slugPrefix="custom-"
+				popoverProps={ popoverProps }
 			/>
 			{ !! duotonePalette && !! duotonePalette.length && (
 				<div>