Add scroll-margin to make sure that menu items are fully visible when…

… scrolled into view
WordPress · Nov 22, 2023 · 264b4fc · 264b4fc
1 parent da57e59
commit 264b4fc
Showing 1 changed file with 6 additions and 0 deletions.
diff --git a/packages/components/src/dropdown-menu-v2-ariakit/styles.ts b/packages/components/src/dropdown-menu-v2-ariakit/styles.ts
@@ -149,6 +149,12 @@ const baseItem = css`
 	padding-block: ${ ITEM_PADDING_BLOCK };
 	padding-inline: ${ ITEM_PADDING_INLINE };
 
+	/*
+	 * Make sure that, when an item is scrolled into view (eg. while using the
+	 * keyboard to move focus), the whole item comes into view
+	 */
+	scroll-margin: ${ CONTENT_WRAPPER_PADDING };
+
 	user-select: none;
 	outline: none;