From 69f64df4ad673f95731bfc434d393d8dec777274 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Wed, 29 Jun 2022 14:28:18 +1000
Subject: [PATCH] Border Controls/Color Palette: Ensure popovers remain within
 small viewports (#41930)

---
 packages/components/CHANGELOG.md                            | 3 ++-
 .../border-box-control-split-controls/component.tsx         | 1 +
 .../src/border-box-control/border-box-control/component.tsx | 1 +
 packages/components/src/color-palette/index.js              | 6 +++++-
 4 files changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 2b09c6b2cb090..22b6eaddd9355 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -10,7 +10,8 @@
 
 -   Wrapped `ColorIndicator` in a `forwardRef` call ([#41587](https://github.com/WordPress/gutenberg/pull/41587)).
 -   `BorderControl`: Improve TypeScript support. ([#41843](https://github.com/WordPress/gutenberg/pull/41843)).
--   `DatePicer`: highlight today's date. ([#41647](https://github.com/WordPress/gutenberg/pull/41647/)).
+-   `DatePicker`: highlight today's date. ([#41647](https://github.com/WordPress/gutenberg/pull/41647/)).
+-   Allow automatic repositioning of `BorderBoxControl` and `ColorPalette` popovers within smaller viewports ([#41930](https://github.com/WordPress/gutenberg/pull/41930)).
 
 ### Internal
 
diff --git a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
index 5d83b61424206..d24c0bf2603f9 100644
--- a/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control-split-controls/component.tsx
@@ -43,6 +43,7 @@ const BorderBoxControlSplitControls = (
 				placement: popoverPlacement,
 				offset: popoverOffset,
 				anchorRef: containerRef,
+				__unstableShift: true,
 		  }
 		: undefined;
 
diff --git a/packages/components/src/border-box-control/border-box-control/component.tsx b/packages/components/src/border-box-control/border-box-control/component.tsx
index 654bd0ec4ce1f..877e5c4da0669 100644
--- a/packages/components/src/border-box-control/border-box-control/component.tsx
+++ b/packages/components/src/border-box-control/border-box-control/component.tsx
@@ -69,6 +69,7 @@ const BorderBoxControl = (
 				placement: popoverPlacement,
 				offset: popoverOffset,
 				anchorRef: containerRef,
+				__unstableShift: true,
 		  }
 		: undefined;
 
diff --git a/packages/components/src/color-palette/index.js b/packages/components/src/color-palette/index.js
index 9d3be9e463d83..5ef690eb1e4fa 100644
--- a/packages/components/src/color-palette/index.js
+++ b/packages/components/src/color-palette/index.js
@@ -118,7 +118,11 @@ export function CustomColorPickerDropdown( { isRenderedInSidebar, ...props } ) {
 			contentClassName="components-color-palette__custom-color-dropdown-content"
 			popoverProps={
 				isRenderedInSidebar
-					? { placement: 'left-start', offset: 20 }
+					? {
+							placement: 'left-start',
+							offset: 20,
+							__unstableShift: true,
+					  }
 					: undefined
 			}
 			{ ...props }