From 264b4fcae90568dc8ace2ddbfe5daa9efbebb632 Mon Sep 17 00:00:00 2001 From: Marco Ciampini Date: Wed, 22 Nov 2023 11:12:08 +0100 Subject: [PATCH] Add scroll-margin to make sure that menu items are fully visible when scrolled into view --- packages/components/src/dropdown-menu-v2-ariakit/styles.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/components/src/dropdown-menu-v2-ariakit/styles.ts b/packages/components/src/dropdown-menu-v2-ariakit/styles.ts index 58e6c535ad20db..1f3cbc7f8710e8 100644 --- 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;