From 458a2b8878b493a0fac696ec291408995a6b7578 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 21 Apr 2023 13:14:27 +1000
Subject: [PATCH] Leverage popover props to modify palette popovers on mobile

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

diff --git a/packages/edit-site/src/components/global-styles/color-palette-panel.js b/packages/edit-site/src/components/global-styles/color-palette-panel.js
index 7bf422b878e01..e81b35772e2df 100644
--- a/packages/edit-site/src/components/global-styles/color-palette-panel.js
+++ b/packages/edit-site/src/components/global-styles/color-palette-panel.js
@@ -1,6 +1,7 @@
 /**
  * WordPress dependencies
  */
+import { useViewportMatch } from '@wordpress/compose';
 import {
 	__experimentalPaletteEdit as PaletteEdit,
 	__experimentalVStack as VStack,
@@ -43,6 +44,15 @@ export default function ColorPalettePanel( { name } ) {
 		'color.defaultPalette',
 		name
 	);
+
+	const isMobileViewport = useViewportMatch( 'small', '<' );
+	const popoverProps = isMobileViewport
+		? {
+				placement: 'bottom-start',
+				offset: 8,
+		  }
+		: undefined;
+
 	return (
 		<VStack
 			className="edit-site-global-styles-color-palette-panel"
@@ -56,6 +66,7 @@ export default function ColorPalettePanel( { name } ) {
 					onChange={ setThemeColors }
 					paletteLabel={ __( 'Theme' ) }
 					paletteLabelHeadingLevel={ 3 }
+					popoverProps={ popoverProps }
 				/>
 			) }
 			{ !! defaultColors &&
@@ -68,6 +79,7 @@ export default function ColorPalettePanel( { name } ) {
 						onChange={ setDefaultColors }
 						paletteLabel={ __( 'Default' ) }
 						paletteLabelHeadingLevel={ 3 }
+						popoverProps={ popoverProps }
 					/>
 				) }
 			<PaletteEdit
@@ -79,6 +91,7 @@ export default function ColorPalettePanel( { name } ) {
 					'Custom colors are empty! Add some colors to create your own color palette.'
 				) }
 				slugPrefix="custom-"
+				popoverProps={ popoverProps }
 			/>
 		</VStack>
 	);