From 208ab52f6c70c1a816af420bd7249913a99d9322 Mon Sep 17 00:00:00 2001 From: Ishkirat-Singh Date: Thu, 10 Sep 2026 05:33:25 +0530 Subject: [PATCH 1/5] fix(react): keep the grid suggestion menu inside the viewport The emoji picker is rendered as a fixed number of columns, so on narrow viewports it was wider than the screen: the right-hand columns were cut off and the menu only scrolled vertically. Cap the floating element's width to the space floating-ui reports as available, the same way its height is already capped, and let the grid scroll horizontally when the columns do not fit. Fixes #3078 --- packages/ariakit/src/style.css | 2 ++ packages/mantine/src/blocknoteStyles.css | 2 ++ .../GridSuggestionMenu/GridSuggestionMenuController.tsx | 3 ++- .../suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx | 2 +- 4 files changed, 7 insertions(+), 2 deletions(-) diff --git a/packages/ariakit/src/style.css b/packages/ariakit/src/style.css index 59974a6d60..88bb7de881 100644 --- a/packages/ariakit/src/style.css +++ b/packages/ariakit/src/style.css @@ -157,6 +157,8 @@ height: fit-content; justify-items: center; max-height: inherit; + max-width: inherit; + overflow-x: auto; overflow-y: auto; padding: 20px; } diff --git a/packages/mantine/src/blocknoteStyles.css b/packages/mantine/src/blocknoteStyles.css index b219cfb628..53ce7d7c8b 100644 --- a/packages/mantine/src/blocknoteStyles.css +++ b/packages/mantine/src/blocknoteStyles.css @@ -441,6 +441,8 @@ height: fit-content; justify-items: center; max-height: inherit; + max-width: inherit; + overflow-x: auto; overflow-y: auto; padding: 20px; } diff --git a/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx b/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx index 1fe667635b..4cc02767ca 100644 --- a/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx +++ b/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx @@ -144,8 +144,9 @@ export function GridSuggestionMenuController< }), shift(), size({ - apply({ elements, availableHeight }) { + apply({ elements, availableHeight, availableWidth }) { elements.floating.style.maxHeight = `${Math.max(0, availableHeight)}px`; + elements.floating.style.maxWidth = `${Math.max(0, availableWidth)}px`; }, padding: 10, }), diff --git a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx index f8c95331b8..530896719c 100644 --- a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx +++ b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx @@ -16,7 +16,7 @@ export const GridSuggestionMenu = forwardRef<
Date: Fri, 11 Sep 2026 04:09:36 +0530 Subject: [PATCH 2/5] fix(react): size the grid suggestion menu by its border box With max-width capped to the available width, content-box sizing let the padding push the menu past the cap, and the shadcn min-w-32 kept it from shrinking on very narrow viewports. --- packages/ariakit/src/style.css | 1 + packages/mantine/src/blocknoteStyles.css | 1 + .../suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/ariakit/src/style.css b/packages/ariakit/src/style.css index 88bb7de881..e51b76292d 100644 --- a/packages/ariakit/src/style.css +++ b/packages/ariakit/src/style.css @@ -157,6 +157,7 @@ height: fit-content; justify-items: center; max-height: inherit; + box-sizing: border-box; max-width: inherit; overflow-x: auto; overflow-y: auto; diff --git a/packages/mantine/src/blocknoteStyles.css b/packages/mantine/src/blocknoteStyles.css index 53ce7d7c8b..39fe0796b0 100644 --- a/packages/mantine/src/blocknoteStyles.css +++ b/packages/mantine/src/blocknoteStyles.css @@ -441,6 +441,7 @@ height: fit-content; justify-items: center; max-height: inherit; + box-sizing: border-box; max-width: inherit; overflow-x: auto; overflow-y: auto; diff --git a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx index 530896719c..ffdf5ab89f 100644 --- a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx +++ b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx @@ -16,7 +16,7 @@ export const GridSuggestionMenu = forwardRef<
Date: Thu, 17 Sep 2026 15:02:52 +0200 Subject: [PATCH 3/5] Changed implementation to apply width constraint using CSS instead of `size` middleware --- packages/ariakit/src/style.css | 2 +- packages/mantine/src/blocknoteStyles.css | 2 +- .../GridSuggestionMenu/GridSuggestionMenuController.tsx | 3 +-- .../suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx | 2 +- 4 files changed, 4 insertions(+), 5 deletions(-) diff --git a/packages/ariakit/src/style.css b/packages/ariakit/src/style.css index e51b76292d..b1689210fb 100644 --- a/packages/ariakit/src/style.css +++ b/packages/ariakit/src/style.css @@ -158,7 +158,7 @@ justify-items: center; max-height: inherit; box-sizing: border-box; - max-width: inherit; + max-width: 100vw; overflow-x: auto; overflow-y: auto; padding: 20px; diff --git a/packages/mantine/src/blocknoteStyles.css b/packages/mantine/src/blocknoteStyles.css index 39fe0796b0..0fb94ae5a6 100644 --- a/packages/mantine/src/blocknoteStyles.css +++ b/packages/mantine/src/blocknoteStyles.css @@ -442,7 +442,7 @@ justify-items: center; max-height: inherit; box-sizing: border-box; - max-width: inherit; + max-width: 100vw; overflow-x: auto; overflow-y: auto; padding: 20px; diff --git a/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx b/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx index 4cc02767ca..1fe667635b 100644 --- a/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx +++ b/packages/react/src/components/SuggestionMenu/GridSuggestionMenu/GridSuggestionMenuController.tsx @@ -144,9 +144,8 @@ export function GridSuggestionMenuController< }), shift(), size({ - apply({ elements, availableHeight, availableWidth }) { + apply({ elements, availableHeight }) { elements.floating.style.maxHeight = `${Math.max(0, availableHeight)}px`; - elements.floating.style.maxWidth = `${Math.max(0, availableWidth)}px`; }, padding: 10, }), diff --git a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx index ffdf5ab89f..10fbf1d4fb 100644 --- a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx +++ b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx @@ -16,7 +16,7 @@ export const GridSuggestionMenu = forwardRef<
Date: Fri, 18 Sep 2026 14:54:31 +0200 Subject: [PATCH 4/5] Updated `elementOverflow` to account for horizontal overflows --- packages/react/src/util/elementOverflow.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/react/src/util/elementOverflow.ts b/packages/react/src/util/elementOverflow.ts index 6a98cbd003..82f0771f54 100644 --- a/packages/react/src/util/elementOverflow.ts +++ b/packages/react/src/util/elementOverflow.ts @@ -4,6 +4,17 @@ export function elementOverflow(element: HTMLElement, container: HTMLElement) { const topOverflow = elementRect.top < parentRect.top; const bottomOverflow = elementRect.bottom > parentRect.bottom; + const leftOverflow = elementRect.left < parentRect.left; + const rightOverflow = elementRect.right > parentRect.right; + + const horizontalOverflow = + leftOverflow && rightOverflow + ? "both" + : leftOverflow + ? "left" + : rightOverflow + ? "right" + : "none"; return topOverflow && bottomOverflow ? "both" @@ -11,5 +22,5 @@ export function elementOverflow(element: HTMLElement, container: HTMLElement) { ? "top" : bottomOverflow ? "bottom" - : "none"; + : horizontalOverflow; } From 4ae1e56365122a327243b9eb2677c9cb75ced7fe Mon Sep 17 00:00:00 2001 From: Matthew Lipski Date: Mon, 21 Sep 2026 16:56:52 +0200 Subject: [PATCH 5/5] Disabled overscroll in grid suggestion menu --- packages/ariakit/src/style.css | 1 + packages/mantine/src/blocknoteStyles.css | 1 + .../suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx | 2 +- 3 files changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/ariakit/src/style.css b/packages/ariakit/src/style.css index b1689210fb..17c68be36c 100644 --- a/packages/ariakit/src/style.css +++ b/packages/ariakit/src/style.css @@ -160,6 +160,7 @@ box-sizing: border-box; max-width: 100vw; overflow-x: auto; + overscroll-behavior-x: none; overflow-y: auto; padding: 20px; } diff --git a/packages/mantine/src/blocknoteStyles.css b/packages/mantine/src/blocknoteStyles.css index 0fb94ae5a6..6f85763a7a 100644 --- a/packages/mantine/src/blocknoteStyles.css +++ b/packages/mantine/src/blocknoteStyles.css @@ -444,6 +444,7 @@ box-sizing: border-box; max-width: 100vw; overflow-x: auto; + overscroll-behavior-x: none; overflow-y: auto; padding: 20px; } diff --git a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx index 10fbf1d4fb..a79ffb49f0 100644 --- a/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx +++ b/packages/shadcn/src/suggestionMenu/gridSuggestionMenu/GridSuggestionMenu.tsx @@ -16,7 +16,7 @@ export const GridSuggestionMenu = forwardRef<