From 3e81f13d84f2f8361190d3c2d17607906ea55e3f Mon Sep 17 00:00:00 2001
From: Aki Hamano <54422211+t-hamano@users.noreply.github.com>
Date: Sat, 24 Feb 2024 10:53:17 +0900
Subject: [PATCH] Shadow: Fix layout collapse when indicator is selected
 (#59309)

---
 .../src/components/global-styles/style.scss          | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/block-editor/src/components/global-styles/style.scss b/packages/block-editor/src/components/global-styles/style.scss
index b99759511413a..a47af6cd35e99 100644
--- a/packages/block-editor/src/components/global-styles/style.scss
+++ b/packages/block-editor/src/components/global-styles/style.scss
@@ -2,10 +2,20 @@
 	fill: currentColor;
 }
 
+// @todo: Ideally, popover, swatch size, and gap values should be CSS variables
+// to apply precise grid layouts.
+// https://github.com/WordPress/gutenberg/blob/954ecae571abbddc113d3a4bd8e1a72230180554/packages/block-editor/src/components/duotone-control/style.scss#L3-L9
 .block-editor-global-styles__shadow-popover-container {
 	width: 230px;
 }
 
+.block-editor-global-styles__shadow__list {
+	display: flex;
+	gap: 12px;
+	flex-wrap: wrap;
+	padding-bottom: $grid-unit-10;
+}
+
 .block-editor-global-styles-filters-panel__dropdown,
 .block-editor-global-styles__shadow-dropdown {
 	display: block;
@@ -28,8 +38,6 @@
 	border-radius: $radius-block-ui;
 	cursor: pointer;
 	padding: 0;
-	margin-right: $grid-unit-15;
-	margin-bottom: $grid-unit-15;
 
 	height: $button-size-small + 2 * $border-width;
 	width: $button-size-small + 2 * $border-width;